Introduction
Hey there, welcome to my new website. As I begin my career, I plan on using this space to share projects, achievements, roadblocks, and thoughts. I’m not entirely sure what direction it will take, but that’s part of the fun. 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 new things. In my first post (which you have found yourself reading), I’ll walk you through the process of building the website and what I hope to do next. Thanks for checking it out!
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.
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.
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.