Building an HTML Website From Scratch
This year I have been looking for fun projects to expand my cybersecurity knowledge and develop skills that I might find useful later in my career. I have all of these ideas for projects, but I needed a place to document my methods, troubles, and results. Then it came to me—why not make my first project about building a website where I can blog them?
When I was a kid, something that always fascinated me was using the inspect feature in any web browser. The ability to change and delete text and then show it to my friends made me feel like the best 6th-grade hacker. While I knew how to manipulate the code for the page, I never fully understood what was going on behind the scenes. Ten years later, I was determined to make my own website using HTML.
Where to Start?
As a kid growing up in the late 2000s and 2010s, my go-to for learning new things was YouTube. I simply searched "How to make a website using HTML" and clicked on the first video I saw: this tutorial. From this, I grasped the general structure of an HTML document: starting with <!DOCTYPE html> and <html>, followed by <head> and <body>. I based my initial code on this format.
As I started writing text, I noticed how bland it looked—just black text on a white background, like a Wikipedia article. I knew there had to be a way to make it more visually appealing. So, I watched another video titled "I Built a Website in 10 Minutes Using CSS & HTML". The website in the thumbnail looked good, so I clicked on it. This introduced me to CSS styling, and I used some of the techniques to develop my nav and css files.
Improving the Design
As I continued, I started thinking about how to design my website. My goal was to move away from a basic Wikipedia-style HTML page to something more colorful with images. With some tips from ChatGPT, I learned how to add an image using `img src`—and just like that, I had my headshot on the front page.
At this point, I felt comfortable with the basics of HTML and CSS. I spent hours tweaking the layout until I was happy with the circular project images and homepage design. I wanted to include an introduction about myself and a clear showcase of my projects. Once I was satisfied with the home page, I felt that the hardest part of building my website was done.
Expanding the Website & Troubleshooting
Creating the projects page was straightforward—I copied much of the source code from my homepage and adjusted it to maintain a uniform look. Of course with any coding projects there are frustrations with debugging. When typing out this page I had huge blue bar in the middle of the page and had no idea why. I worked for about an hour trying to figure out why until I realized that when I was typing out stuff like "nav" it read it as an actual call. So I had called a nav in the middle of the page which messed up the whole thing. With that out of the way Finishing the resume and contact sections was just as easy, and I felt ready to put my website on the internet for real.
Making the website public
Working in visual studio code and opening those files in the browser is one thing, putting the files on a web server is another. I elected to use github pages to host my website along with purchasing my own domain name. If you are accessing this website you know the name is montroycyber.com. I purchased my name from namecheap.com because it was the cheapest and the easiest. I uploaded all of my html files into github pages and configured my website and set up my domain. Boom now I have a website on the internet.
Conclusions
Building a website really wasn't as hard as I thought t would be. I have been coding for close to five years and the more languages and algorithms I learn they are all different syntaxes that achieve the same thing. HTML and CSS have different syntaxes than Java and Python but things such as indentation and classes aren't different you just need to get used to them. It's been a really fun project, I built a tool that I will now be able to use to showcase my cybersecurity projects and competitions feels great. I hope you enjoyed reading this and I can't wait to make more of these blog posts.
Joe Montroy