My site-making process // July 4, 2023

Every few months after completing my site, I get the urge to re-do my site, first time I did it, I remade my homepage because i thought my index was empty and a lacked content because while making my first layout, I was held back due to the fact that I was semi-new to coding and didn't have that many tricks up my sleeve to imagine or execute the nicest site, so when I got better at coding and web design I wanted to create a homepage that would reflect it. It served me well and a lot of people came to know my site throught that index but it was time to retire it.

Now that I've got that out of my system, I want to talk about my process a little. Since the agonizing memories of remaking my index are still fresh I feel like I can talk about it accurately. I'm gonna talk about what I do normally when making a layout then I'm gonna talk about how I made my third layout -most likely the one I have now as you're reading- which differed from the others because I didn't like anything I was making and was all over the place.

Onto my regular process, I start with sketching a layout, maybe on ms paint, maybe on paper, whatever is the most convenient one to me. These layouts can look very simple or complex, depends entirely on you. Below, I put my examples.

I usually pick one graphic and base the color of the pages around that. If i feel as though it needs more graphics I go hunting for similar colors or make my own. Also I should note, while still putting a lot of thought and effort into every other page, I put a higher amount of importance to the index page, as that page will be the first impression of a lot of people, so I go through more trial and error.

After having a basic layout down in paper, I like to plan out the text I will be puttin on my page, which will determine the sizes of the containers. I recommend you plan this before hand though, especially if it's a page focused on text, like an "about me" page. You can use literally anything to write this text down, right now I'm using brackets that has a text document open.

After this point, it's mostly coding, my coding process is basic so is my knowledge in code but I'll talk about it briefly. I usually work with grids and divs, before I even begin coding, I mark what will go on which grids on the sketch's canvas as to make my job easier. I also like to use html markers while coding for the same reason. I create a container to put every div inside it, I usually put every div down before I start styling them. I also do the CSS on the same HTML sheet before transferring it to it's own style sheet because it's just easier and way more convenient to work with that way. This basically is my process, I play around with CSS until I get something decent looking.

This is the process I usually lawfully follow, and so I followed it once again, I sketched the layout out, I found graphics, I even made some of my own, I coded, the same way described above and I got really close to a final product a few times but it just wasn't working for me, I didn't like anything about it. I wouldn't say it was a "bad" homepage but I was really disappointed by it. So I sat down and started planning out a layout complete with the graphics. I tried to get it as accurately sized as possible too. And behold,

This was the final product. This isn't my usual process, I've never felt the need to plan a page this detailed but I love the end product to bits and with the canvas I had to freedom to go ham with the graphics etc. and actually making my own instead of trying to find ones that matched the page I had in mind was really relieving.

Closing thoughts, I'm not used to writing posts this long and I'm not the best at it either so I hope this wasn't an empty or boring read. Also, English is my second language so some parts may seem off or weird, I apologise!