I am learning website development on my own by developing a website using HTML, CSS, and JavaScript. Currently there is no JavaScript used, as I am still developing and learning new things related to HTML and CSS. I am just at the beginning stage.
Actually, this is very interesting, as I am not learning a pre-designed textbook or YouTube videos. I am actively building a website and learning from it.
I already used HTML templates and Hugo and Zola, like static website generators. So writing code was never harder, but implementing features or arranging screen space is a big pain.
I know the site looks a lot uglier, but before it was more ugly and misaligned than this. At least I managed to make it like this.
Note:
The posts and contents on this website are converted from my Hugo site, which used Markdown format. The site link is provided at the footer, and the code is also on GitHub. The images are from Unsplash and Pixel sources.
https://www.w3schools.com/html/
https://www.w3schools.com/css/
https://www.w3schools.com/js/These are great resources for learning this stuff. Even if you don’t want to go through in order, it’s easy to glop in to get clarity on anything you’re questioning.
I really liked https://developer.mozilla.org/en-US/docs/MDN/Tutorials
yes, that too
I feel like this website is a blight on my search results and is never what I want to see. They have stuff for all kinds of languages and it’s usually outdated or not optimal or not idiomatic or just feels like AI slop before AI slop was really a thing. Copied and pasted crap from other places with no context etc.
Huh, interesting. I’ve mostly used the html and css pages when teaching those, and I’ve found them to be perfect for beginners.
I think I have a historical bad taste from many years ago. Some cursory searching around yields that many say w3 schools has improved markedly since I last thought I could rely on it.
It used the W3 designation which lent it credibility it doesn’t have, always showed up at the top of my results when I just wanted official documentation from python or MDN, etc. I’m guessing it’s a fine resource for html/css/js now.
I share that historical prejudice against w3schools. 100% on the slop before LLM slop.
Thank you. That site looks like a library for developers and programmers.
Maybe it can eliminate my heavy notebook usage.
Maybe it can eliminate my heavy notebook usage.
I’d keep the notebook usage. For me it burns what I’m learning into my brain, then a quick reference to the book is all I need to remember the rest. Unless I’ve been away for 10yrs then it’s all gibberish hehe
Huh, I didn’t know about the
header,asideandmainhtml tags for use within the body, I should use them on my own site.One thing I would recommend is using smaller images for the sidebar links, the one for your “DNS The Internet phonebook” is 1.68mb, a whopping 5520x3673 image! Thumbnails don’t need to be 4k resolution, 300x300 or similar ought to suffice
Btw, the link for DNS is redirecting to the Encryption piece
I used 4k because in every screen, thumbnails look clear. I too noticed the website loads too slowly. I will fix it and verify all links working correct. Thank you.
(Update: Fixed)
Nice job. If I were you I would:
- remove the pictures in the “recent posts” bar on the left
- in each post: make the pictures smaller, I have to scroll down to read the text, and also remove the legend of the pictures
- make the pictures smaller in the list of posts, and decrease the padding or margin, because it only shows 3 posts on my screen. You could easily show 6 posts instead.
Ok. I will try to make those changes.
In display:grid, using auto-fit may work properly if i reduced the padding and border spaces.
Can you please tell me, did you visit the website via a mobile or desktop browser?
Can you please tell me, did you visit the website via a mobile or desktop browser?
LibreWolf on Linux Mint (desktop), and Chrome (eww) on GrapheneOS (mobile).
And you have nice and specific commits too which is good (each commit having one purpose, etc.)
deleted by creator
As you suggested, i removed the images on sidebar, then updated its container size, margin and padding values. Posts overview page now shows 6 posts at a time. Thumbnails look smaller.
Because i removed the global margin value for <p>, posts and about section requires modification with specific classes. I will do it when i have more free time.
Thanks for the suggestions.
Nice. If you realllllly have time to waste, I do wonder why your blog doesn’t have a RSS and/or Atom feed that I can put in my RSS reader?
But it’s not mandatory, I’m nitpicking and it may be too hard to do (to be honest, I don’t know how to do that either).
Yes. For now, it would be too hard for me. But i will do it once i learn more.
How are you generating the html?
Do you mean, how i convert markdown to html? There are tools online for that.
Just search for “markdown to html convertor”.
I am curious about your workflow, are you writing your blog posts in markdown, the using an online markdown to html converter, then copy pasting the output onto your website?
Also this is a good resource for learning some CSS: https://css-tricks.com/
They have some very helpful guides for things like flex boxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I use ghostwriter to write blogs in markdown. Then with the help of a converter i convert it into html format and modify it from there.
Why not directly write in HTML?
Because for me writing blogs in direct html feels so hard for several reasons,
- Adding tags every-time affects my writing flow.
- Markdown is so simple compared to HTML and ghostwriter shows a direct live preview on the side.
- Markdown to HTML converters work so well by converting the markdown symbols into proper HTML tag.
But why I may switch?
I would consider to switch to directly writing blogs in HTML when i have enough knowledge about web development. The reasons are,
- It is harder to correct or tweak lines of converted HTML, when compared to directly written HTML.
- Converters are not perfect either, they make mistakes when identifying equivalent tags. Then later it will become a headache to review again and again.
- Later we have to implement CSS and class by reading each line of converted HTML, which actually doubles the effort.
- If I learned HTML, CSS and JavaScript well, and get comfort with it, then there is no need to write in Markdown format, use Hugo/Zola, find a good pre-built theme and keep it from breaking, etc. HTML, CSS, JavaScript manages itself everything.
- Managing our own website and writing blogs in it is actually very interesting and exciting than writing blogs in someones else’s template/theme. (No matter we get viewers or not).
I recommend directly writing on HTML rather than Markdown to reduce the effort needed.
Thank you for the resources. It looks very helpful.
I’ve heard that CSS was designed to make sense to layout designers, not programmers, so i wonder if there’s a possible crash course in CSS knowledge prerequisites?
I’ve heard that CSS was designed to make sense to layout designers, not programmers […]
Most programmers have only ever learned the imperative c-style of programming. When that’s all you have experience with, it’s hard to understand (and sometimes even recognise) other kinds of programming because you need to learn an entire different way of thinking.
CSS is definitely a programming language, specifically it’s in the declarative/constraint/logic programming paradigms.
Learning different programming paradigms can be difficult because you often can’t bring your previous knowledge with you and also need to learn the problem space that the language is designed to solve.
- CSS: requires learning about layout systems, design
- SQL: requires learning how best to store and process data
- Prolog/datalog: requires learning how best to think about and search a problem space
- Proofers (Z3, etc…): requires learning how best to create rules that can prove or disprove possibilities
- Graphics programming: requires learning how best to compute over massively parallel hardware without any one computational unit holding back the other units.
so i wonder if there’s a possible crash course in CSS knowledge prerequisites?
For learning CSS specifically: I’d recommend Kevin Powell playlist for beginners: (https://www.youtube.com/@KevinPowell). Then you can follow up with https://ishadeed.com/ and https://www.joshwcomeau.com/.
I’d recommend against w3schools since they usually just list out a bunch of things. That’s useful for learning what things there are, but not what they’re used for, why you would want to use them, how you would combine them to solve a specific problem, or if there’s something else not on the list that already solves the problem for you (or the other problems you’re having that you don’t even realise you’re having).
I’d also recommend against bootstrap (unless you just need something small made and you don’t care about having to make changes in the future). It leads to “div soup”, and often makes you use old tools methods that have their own problems that you won’t be aware of. Tailwind suffers from the same thing with it’s own variation of div soup called class soup.
CSS solves problems much easier the cleaner your html is, you want to avoid soup as much as possible.
Thank you! This is exactly the kind of expert context I was hoping someone could pass along. Much appreciated!
This isn’t really a crash course but it teaches css very well
