Cloud Resume Challenge - Parts 2 & 3: Building the Front End (HTML/CSS)

I'm probably spending way too much time on this part of the challenge, but I see this website as an extension of myself, so I felt very strongly that it needed to come from me. I could have easily gone and purchased someone else's website code layout as a base and gotten this step over and done with and on to the actual challenge (the back end), but I wanted to see if I could build my resume site with my own two hands!

I had ChatGPT to help too, of course, so I confidently dove into the 2nd part of this challenge.

First, I carefully wrote out what I envisioned on a notepad and gave ChatGPT step-by-step instructions that were as clear and as literal as I could make them. I've studied a bit of HTML and CSS on Mimo before and written a bit of code back in middle school on Neopets, so I could at least speak the language, even if I hadn't attempted building my own webpage before.

After a bit of back and forth with Chat, I had something that looked a bit like what I wanted, but needed some major tweaking. For one, my navigation bar was obstructing the rest of the page's contents and not everything was lining up the same way or with the same text stylings, since each section had been executed in different batches instead of from one cohesive standpoint. No longer in love with my initial concept, I ended up completely scrapping the first attempt and starting over completely. By the end of our secondary back-and-forth, I once again encountered navigation bar, text, sizing and section alignment issues.

After hours of studying my code, getting frustrated, going out to dinner, coming back with a fresh mind and learning about padding, margins and divs, things finally started clicking. The feeling I got when I figured out the solution and saw everything was positioned exactly how I had imagined was beyond happiness. I couldn't help but smile and bask in what I had been able to create from nothing!

It took one failed iteration and more time than I wanted, but the results were worth every second! I'm excited to create something like this again someday and already have some ideas, but that needs to be put on the backburner for now.

I spent at least 3 ~ 4 days working on these steps, on and off. On the 3rd day, I was so close to calling for help, for reaching out to one of my web developer friends for an easy way out, but I didn't! I wanted to prove to myself that I could figure it out and I did!

It's also amazing to me how such small changes can impact the entire structure in such large ways. There were many times where I would erase something to test its impact, only to find multiple sections were now broken. At the end of this project, I saw it all like a delicate house of cards. It took me a while, but this one was built to endure, just like its creator.

The most satisfying moment of all for me was when I realized what I liked on the page and started erasing and writing HTML and CSS to get the same results for each section using div tags WITHOUT needing to consult ChatGPT! I was ACTUALLY coding my own site! :D That was the greatest reward.

This is only the beginning of this project, but I'm already so proud of myself!

Now let's see what else I can do~