My Approach

The first step I take when working on a webpage is to sketch out the design with boxes to get a feel for the layout and structure. This gives me a good idea of how I am going to build the page out.

The next step I take is to do all the html so I can get the "bones" of the project done.

I then work on the mobile friendly design of the page. Once I am happy with the look of mobile design I start adding media queries for the desktop design.

Finally I go back over my code to refactor and clean it up so it is easy to read.

Challenges

My biggest challenge with this assignment was forcing myself to use vanilla CSS and not rely on a framework like Tailwind. I use Tailwind in my personal projects because I believe it is a very fast approach to get a page up and running while looking good. So going back to basics was a bit of a challenge since I was used to the shorthand of Tailwind and placing my Tailwind classes right inside my HTML elements. I relied a lot on the MDN when I had trouble remembering a CSS property or how to apply it. I also used Google and ChatGPT for any other issues I ran into.

Final Thoughts

I really enjoyed this assignement and challenging myself to create this layout with only vanilla CSS and a bit of JavaScript for the nav. I will continue to improve my CSS skills as it is a very important skill in any web developers toolbelt. I appreciate the oppurtunity and hope to hear back soon!