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.
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.)
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.
deleted by creator
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.
as someone who types out their own html and css… the struggle with setting up hugo, fighting against it’s directory layout format and a lot of magic invocations that the docs refuse to explain within 100 lines of “get started” title has simply made me appreciate the w3c group and the joy it is to writing my own html and css and how readable it is. copying it to the server as the CI/CD pipeline is an added bonus.
Actually, I am learning more than I expected. I thought website animations were implemented by JS, but just now I pushed a commit by adding animation to an image just using the CSS keyring property. And it was much simpler than I imagined. No rush, no complexity.
no complexity
to be fair i am often scared by the direction CSS is going… it was supposed to be just styling and then it added states like hover and hidden to cover html semantics… but then that lead to state management and before you know it we have a Turing complete language with variables and interactio with HTML.
Sure nobody HAS to use all of that but sometimes I feel like having all of that seems overkill.
But then who am I to complain… I do my frontend with Jinja2 and flask so pure CSS animation is tame in comparison.
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?
This isn’t really a crash course but it teaches css very well
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!
