Webriprob.com/Blog/1

- How I made this website! -

8/10/25

I had a ton of fun working on this website! It's been taking me days to get this up and running and most of that's probably because I'm going about things in a completely inefficient way. I've been writing all the html and css on every page from scratch using a text editor called "Sublime Text". This has it's advantages and disadvantages for me. One one hand, it's been really educational for me to actually understand how css and html elements work, and I feel like it's really helped de-mystify html and css for me. Anything beyond that is still super scary to me tho... I have no idea how I would begin to develop a website with a function... The disadvantages are that it's really slow to make changes to the website, so I can't be as free and creative as I might want to, because there's a lot of boilerplate I have to add to each page and element I add. Once something exists, changing the style REALLY takes a lot of dedication. Fortunately, I had a pretty strong sense of how I wanted it to look going into the project, which I'll talk about later.

In this blog post I'll talk about how I went from almost no knowledge of Javascript/html to mkaing this website! I hope it can help anyone interested in making their own.

My experience with CSS and HTML began back in 2021 when I was participating in the Battle of the Bits Advent Calendar event. Day 19 was to build a website from scratch using HTML and CSS. At the time I was super strapped for time, and I only had about an hour to actually learn anything. But I was determined to complete every day of the advent calendar and I finished the website at around 3:00 am at my friends house. The website sucked and HTML seemed like an impossible beast to wrap my head around. I was using something called a "what you see is what you get" (WYSIWYG) editor called BlueGriffon, which is basically a free alternative to Adobe Dreamweaver

My first ever HTML page:



In terms of WYSIWYG editors, I haven't used them since, so I don't really know how useful a tool they would be to beginners, but I can say from my personal experience, that using one did not really in any way make the process of learning easier for me, and you still need to know how HTML works to use a WYSIWYG editor. websites are more complicated than word docs or PDFs, so doing basic stuff like the left menubar on this site will require some knowledge of what's going on under the hood.

After this, I went to college for CS, where I learned C++. Now, HTML and CSS are not programming languages so it would be weird if learning C++ made me better at HTML, but next year in 2022 I re-entered into the BOTB Advent Calendar, and for some reason, learning HTML and CSS felt like a piece of cake. I'm still not sure why this occurred, but there seems to be some kind of skill that transfers over from programming to website design.

My second HTML page:



After this, I had thoughts for a couple years of making a website, but I never got around to it. The closest I ever got to trying was when I learned about the tool "Figma". Before I used Figma, I thought it was some sort of virtual whiteboard tool kind of like Miro, and had no interest. But when I saw people making really incredible UI mockups with it, I immediately had to try it out. It turns out that Figma is ACTUALLY a vector design tool, which you can use to mockup UI for different types of applications. It's kind of incredible, it's one of the most intuitive apps I've ever used, and even though the toolset is incredibly simple, It lets you do a lot of stuff if you're creative with it. The community surrounding it is extremely uncanny though... It's a lot of corporate style grifter figures... looking up figma tutorials online is downright creepy.

Figma is based on sorting elements into hierarchies. Every element fits into a folder, which fits into another folder, which fits into another folder, and you can put automation inside these folders to align the elements all at once. So for example, you can make a star icon folder, and inside this folder would be separate SVG shapes that make up the star. this star folder can be put inside a folder alongside text that says "home" and this folder can be put in a menu bar where you can automate the layout to space out different menu bar items equally. It's the perfect UI design tool, And I had so much fun recreating UI elements from windows with it.

Examples of UI I mocked up in Figma:





Anyways, after I learned about it, I started to use it to come up with ideas for my website:


I love using figma for this because I can try out a ton of ideas quickly without having to worry about feasibility or any other kind of good design practices. And It's way better than doing it on paper or in another image editor, because it's so much easier to create something that actually looks like a real website. Originally, my designs had a more aqua/Y2K look to them, which I tried to keep a little of in the final design of my website (the one you're looking at!), but ended up moving away from in the end.

These designs sat around on the cloud gathering dust for over a year until one day I finally decided to go for it and start designing a website. The problem is that things seem similar on paper than in practice. For example, the grey sidebar needs to dynamically resize itself according to the content on the page, and when I tried to design my website for the first time, I could not figure out how to do this for the life of me. Modern websites are designed based around elements called "divs". These are invisible rectangular boxes that you can arrange and put other items inside, kind of like how groups (folders) in Figma work. They are the building blocks of layout on the web. Unfortunately, there are a lot of rules they have that you have to learn. For example, you can't just "center" a div. You also can't just "place divs next to each other". You have to learn the method required to do each of these things and when I was new to building webpages, "how to center a div" was searched almost every time I sat down to work on one.

If you're curious, centering a div is pretty simple. You have to attatch the CSS style "margin:auto" to them. this is because by default, a div does not have any margins, so it will simply stay at the top right corner of it's container. Margins are the empty space surrounding an HTML element. by adding margin: auto, the browser adds margins of equal size on the left, right, top and bottom so that the element will float in the center of the container that it is in. Other ways to do this are to apply the "display: inline" property to the div and assign "text-align: center" to the container. for a simplified explanation, the div is almost treated as if it were text, and is allowed to be automatically aligned to the center of the container. Using "display: inline" you can also put divs next to each other. In HTML, when you have 2 divs, the second div will always be placed one row below the first div by default. This is because divs are block elements by default, and blocks cannot share a line. That's just how it is. By changing them to inline blocks, this property is overwritten. When writing this paragraph I learned about spans, which are similar to divs. These are displayed as "inline" elements, but they're hard to use as layout tools because they can't have their own defined width or height.

That was complicated, so to recap: containers in CSS can either be "block","inline" or "inline blocks". Blocks have defined widths and heigths but can't be placed together on the same row, inline elements can, but don't have defined widths or heights. Inline blocks are the fusion that allow you to have inline elements that have width and height

What I'm trying to say with all this is that everything in HTML is just a basic container with extra rules on it. at the heart of everything is a box that has a width and height. A div is just one of these basic boxes with extra rules. An image is one of these that renders as a specified image, and so on and so on. The concept is very similar to classes in programming, so on second thought, it makes a lot of sense that learning C++ would have made me better at html. You learn these rules through practice, and after a while, you begin to be able to intuit more and more how things will display before you write down any html

Back to my site, The reason I was having so much trouble with the sidebar was that I was really into the idea that my site should be "designed for desktop viewing". It makes a lot of sense to me, because whenever I can tell a website is designed with mobile screens in mind they look ugly AF. I thought it would be too hard to make a design that looked good on mobile and desktop, so I ignored modern CSS elements that I thought were only useful for making responsive websites, specifically flex. Once I got over this mental block, though, I discovered that flex does the exact thing I want it to. I loved flex so much I made my entire website with it, which had the added benefit of making it super easy to make my website responsive, which means it doesn't look awful on mobile, and I didnt' have to compromise my desktop layout at all for it! If you're new to HTML and CSS I HIGHLY reccomend learning about flex. It's basically a cheat code for building webpages

Me testing out flex for my website's layout



And that was basically the hardest part! once you can make something like this, you can pretty much make anything! Just always keep learning about HTML and CSS features. I didn't know about span elements until writing this, but if I did, I'm sure I would have used them!

My final advice for learning how to build a website:
1) Learn about divs. add <!DOCTYPE html> to the top of an html file. then you can play around with <div>. learn how to add a border or background color to a div in order to make it visible, and then just try to organize them in a way you like. Take examples from other websites you like (probably not this one).

2) use inline styles at first. most html/css guides will say to put css classes in a separate document, and this is good advice. I do this on this website, but when you're just starting out, you can put css style tags inside html elements like this: <div style="background-color: blue; border: 2px solid red">. This lets you write html faster, although this can develop into bad habits. For example, there are a lot of inline style declarations on this site, and some may consider this bad practice or sloppy. But this is not a professional site, so it's fine, just don't take it as the way things should be done. You can start to define classes with the <style> tag when you have multiple elements you want to share a single style, and you can start to use separate css files when you want to add more pages to your website.

3) use a text editor made for coding. This will color your html code to make it more readable, and alert you to any basic mistakes, like forgetting to close a tag. I use Sublime Text, but notepad++ works great as well. There are many more editors out there, I just like these two because they're lightweight and easy to use.

4) Have a design planned before going in! This can be a double edged sword, because If you can't figure out how to execute your design, you might become discouraged, but In that case, just make a simpler design and try again! Having a solid design guiding me made designing this site wayyy easier. You can make a design with any tool, even paper, but I recommend using a vector tool because it's easy to resize and reposition elements.