Hi! This is the website that I made, again. I made this using HTML, CSS and JavaScript, like a classic beginner web developer. I'll refactor it into React someday if I need it. I wrote all of the code in VSCode and sometimes just editing raw on GitHub if I was desperate. In this article, I'll detail basically how I made all of this! (also, no, just because all of the pages look similar does not mean that i copy pasted it a morbillion times)
Web development in a nutshell
Why didn't I use a website creator like a normal person?
While services like Wix and Squarespace are pretty cool for companies and stuff, for just a personal little website with nothing important hosted on GitHub, it's completely unnecessary. This was also free to make and host. Also, it's completely customizable since I have full control over what goes on here instead of being restrained to whatever a template forces me to use. It's kind of like why I use Arch (btw), complete customizability and I also learn a lot by making this.
What tools did I use for this site?
VSCode and the LiveServer extension. That's it.
What was the hardest part about making this?
CSS is not very fun to work with. While it helps that LiveServer updates on every save, sometimes things break completely for no discernible reason and it's a bit difficult to make everything look exactly like you want it to.
How is this site's directory structured?
In the root / directory, there's the homepage index.html
and main CSS file main_theme.css. In /res/, there's a
fonts directory containing the two* TTF font files for the Atkinson fonts used
in this website, and a images directory containing all of the pictures.
In /src/, there's a js/ folder containing all of the fun little
scripts used. At the time of writing, it only contains cookies.js which
creates the fun little peer pressure system that forces you to take a cookie. (This site
does not actually store cookies in your browser, it simply stores a bit of data in your
cache and clearing your cache allows you to take another cookie. I do not track any of
your personal information whatsoever.)
As well, /src/ also contains the main .html files that make up
the individual pages in this site. There's not very much to it, this website is relatively
simple in structure. I like it that way, there's a lot less to manage.
Also, there's a README.md and .gitignore for GitHub stuff. Not
very important in terms of the actual website, but if you go to the
repository you can see stuff.
Layout as of time of writing.
How are site pages themselves structured?
I use typical HTML. In <body>, I have a few main <div>
blocks: head_navbar contains the top navigational link bar thingy, top_area
contains the title and subtitle, fullwidth_text_block contains the actual body of
the actual body. As well, I also have a footer which contains... the footer.
If you're really interested in how the website is built, I recommend inspecting the HTML yourself,
since there's a lot more div types than the main ones.
Is my code pretty or clean?
No. Not at all. Please do not follow exactly what I do for your own website, I make a lot of mistakes in my formatting and stuff. I suggest reading up on common best practices on how people write HTML. Though, most sites these days are written in React, so unless you're also just making something barebones like me, I would stick to that.
How did I learn how to make this?
Trial and error, which in retrospect isn't the greatest way to learn. But, I used documentation from W3Schools, which was actually really really helpful. Trying to learn HTML/CSS/JS by yourself with zero external documentation is a recipe for failure, which is why documentation and stuff exists. Also, I might have copy and pasted stuff from Instagram reels that I've watched about CSS. That's how you learn, though.
Is bloat a problem?
It kind of will be. I already have reused elements throughout my pages, so I might switch to React.js eventually.