Building My First Website from Scratch

As I begin my career in IT, I plan on using this space to share projects, achievements, and thoughts. I decided to code this site from scratch without any previous HTML or CSS experience. It was a fun way to learn the basics of two new languages, while building a platform to document and track my growth as I learn. In my first post (which you have found yourself reading), I’ll walk through the process of building the website and what I hope to do next.

I recently spoke with a software developer who’s been generous with advice, and also has a personal blog site. During our call, he encouraged me to start my own, so I got to work. Since I didn’t know where to start, having no prior experience, I prompted AI for a logical roadmap from start (now) to finish (having a functional cloud hosted website).

Building the Website

Step one was creating a new Git repository and installing some recommended extensions for web development. This didn’t take very long, so I quickly moved on. I spent some time browsing through other personal tech blogs and started visualizing how I might want my site to look. With an idea in mind, I brought it to life by sketching up a highly detailed layout plan.

Picture of my sketch of website layout Initial sketch of my website plans

Step two was learning the basics of HTML and CSS. I took to YouTube to begin, and found a couple of short courses that were very informative and easy to follow. After a few hours, I had started to understand the basic structure and functions of each language. I also now had reference code to guide me while building my site. With a little experience under my belt and an eagerness to really get started, I started coding.

At first, I focused on creating a static home page that loosely followed the layout I had drawn up (the sketch turned out to be a lot more useful than I had expected). Structuring the HTML was a lot more straightforward than decorating the page with CSS. I also created a header on this page that I planned to reuse on all pages of the site. There was plenty of trial and error and a little banging my head on the desk, but after a few more hours of work, I had a home page I was satisfied with.

Over the next two days, I built the remaining three pages: Contact, About, and All Posts. These were much easier to put together since I figured out you can recycle a lot of HTML code. I also started to appreciate just how much you can do with CSS, but before I went overboard on my first website, I reminded myself to keep it simple and clean.

Once all the pages were done, I added navigation links to make sure users could bounce around the website without getting stuck on a page. I also worked on making some of the elements interactive, like adding hover movement to the cards on the All Posts page. I ran into a little syntax trouble for some of these features, but AI helped me learn through it.

Edit: At this point I have my VPS set up and my website is live. I tried to access it on my phone and nothing on the site scaled down properly. I did some reading and figured out I had to add a bunch more CSS to ensure the site worked well on different devices.

Picture of my sketch of old website Screenshot of this post on the old site

Final Thoughts

At this point, I had a website I was happy with. All that needed to be done now was host it on a VPS (I think that’ll be the topic of my next post). It was refreshing to code again since I hadn’t done much of it after graduation. I need to do some more testing to make sure the site works on all devices and I might add more functionality down the road, but I’m content with it for now.

Through this small project I learned a lot, not just about HTML and CSS but about planning, adapting, and building something from scratch, which is exactly what this site will be about.

Final Edit: The current state of the website was created using a static site generator, this process described did not produce the current state of the website. Another note: Instead of copying and pasting css and html to different files, very easy to have an _include folder to import code, keeps projects cleaner and simpler.