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.

all 24 comments

sorted by: hot top controversial new old
[–] 3 points 7 hours ago (1 child)

How are you generating the html?

  • source
  • hideshow 2 child comments
  • [–] 9 points 14 hours ago* (3 children)

    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.

  • source
  • hideshow 6 child comments
  • [–] 4 points 11 hours ago (1 child)

    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.

  • source
  • parent
  • hideshow 2 child comments
  • [–] 1 point 11 hours ago (1 child)

    Huh, interesting. I’ve mostly used the html and css pages when teaching those, and I’ve found them to be perfect for beginners.

  • source
  • parent
  • hideshow 2 child comments
  • [–] 3 points 11 hours ago (1 child)

    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.

  • source
  • parent
  • hideshow 2 child comments
  • [–] [S] 3 points 11 hours ago (1 child)

    Thank you. That site looks like a library for developers and programmers.

    Maybe it can eliminate my heavy notebook usage.

  • source
  • parent
  • hideshow 2 child comments
  • [–] 3 points 8 hours ago

    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

  • source
  • parent
  • [–] 4 points 13 hours ago (1 child)

    Huh, I didn't know about the header, aside and main html 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

  • source
  • hideshow 2 child comments
  • [–] [S] 1 point 12 hours ago* (last edited 11 hours ago)

    I used 4k because in every screen, thumbnails look clear. I too noticed the website loads too slowly and will fix it by compressing the images. I will fix and recheck the links too. Thank you.

    Update: I compressed those images into smaller size.

  • source
  • parent
  • [–] 2 points 12 hours ago (2 children)

    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?

  • source
  • hideshow 4 child comments
  • [–] 2 points 1 hour ago* (1 child)

    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.

  • source
  • parent
  • hideshow 2 child comments
  • [–] 3 points 14 hours ago (1 child)

    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.
  • source
  • hideshow 2 child comments
  • [–] [S] 1 point 11 hours ago* (last edited 11 hours ago) (1 child)

    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?

  • source
  • parent
  • hideshow 2 child comments
  • [–] 2 points 11 hours ago (2 children)

    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.)

  • source
  • parent
  • hideshow 4 child comments
  • [–] [S] 1 point 10 hours ago* (1 child)

    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 , posts and about section requires modification with specific classes. I will do it when i have more free time.

    Thanks for the suggestions.

  • source
  • parent
  • hideshow 2 child comments
  • [–] 1 point 9 hours ago (1 child)

    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).

  • source
  • parent
  • hideshow 2 child comments