Introduction

A few days ago, I completed my second project from The Odin Project. The goal was to create a landing page from scratch, using the provided style guide and model layout using HTML and CSS. The landing page was divided into five: the hero section, the "random info" section, a quote section, a sign-up section, and a footer.

I enjoyed this project because it allowed me to put the concepts I learned into practice and made me think about how to solve issues creatively. I redid this project three times because I wasn't satisfied with the end product, and I wanted to make sure that the landing page was optimized for desktop and mobile screens. At the end of the night, whenever I thought I was finished and made the last commit to my GitHub repo, I would go to sleep and start tossing and turning from thinking about ways to improve upon the landing page (ex: which flex property to change in a particular class, rearrange the HTML doc, etc.)

Process

In my first iteration, I had trouble knowing where exactly to apply flexbox, and which properties and values to use. I found myself doing the ol' guess-and-check method. As a result, the code was not clean and was difficult for me to understand. I decided to re-read MDN's documentation on flexbox and play the game "Flexbox Froggy" to deepen my understanding.

In my second iteration, I was able to resolve my flexbox issue, but then I ran into trouble with the page's responsive design. When I used Chrome's Inspector tool to check, I saw that the page looked smushed. Half of the text was out of view and there was lots of white space on the right side of the page. So for the third time around, I did some Googling and looked through Stack Overflow. I found that this was due to the image placeholder div in the hero section being too large for the page. I also learned about overflow-x: hidden , used to clipped content to fit horizontally in a padding box.

In my final iteration, I made the page look presentable for desktop and mobile viewing. I also decided to create a theme for the page, inspired from watching news coverage of NASA and Pres. Biden's unveiling of the latest images from the James Webb Space Telescope. In the hero section, I added information about the origins of the JWST and an image of the telescope. In the second section, I included the four images from the telescope: SMACS 0723, the Southern Ring Nebula, Stephan's Quintet, and the Carina Nebula. In the quote section, I added a quote from NASA's administrator about the telescope. Finally, in the sign-up section, I encouraged users to "subscribe" to receive more updates about the telescope.

Reflections/Lessons

Thanks to this project, I've become comfortable using flex-box, especially with align-items and justify-content, using Git to add, push, pull, amend, and merge files and commit messages, and using the Inspector tool to test different screen sizes and debug. I'm even more excited to move forward and revisit JavaScript in the second half of the Foundations course.

View live project here

View source code here