DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

jteacodes
jteacodes

Posted on • Updated on

Self-Taught Developer Journal, Day 17: TOP Landing Page Cont.: Completing the Second Section

Today...

Thinking Through The Odin Project Landing Page cont.

The Odin Project Project Landing Page Full Design Image
Continuing with the second section, I centered the image-box and text in their image-container, but I need to fit the text underneath the box aligned with the box's left and right edge.
My Landing Page Second Section Progress
To adjust it, I tried adding padding for the left and right in the text-container class. While it made the text align with box edges, it made me realize that there was still a lot of space between the boxes.
My Landing Page Second Section Progress Padding
So I went ahead and removed the text padding, and focused on minimizing the width of the images class that contains all four boxes and text. I set the width to 60% and that helped shrink the spaces between the boxes.
My Landing Page Second Section Progress Width
After messing with the padding left and right again for the text-container, the image text still wasn't fitting like I wanted it to. Then I noticed I should set the same width for the image-box and text-container to have their spacing relative to each other. I also increased the image-box width and height so the text doesn't wrap as much. I set the font-size for the image text to small and text-align to center. Lastly, I increased the height of the second section to 30vh or 30% of the viewport height (The viewport is the visible area of your page in the browser you are using to view a site).
My Landing Page Second Section

Next, I will be working on the third section of the Landing Page.

Resources

The Odin Project Landing Page Project

Day 16: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-16-top-landing-page-cont-184i
Please refer to Starting My Self-Taught Developer Journey for context.

Top comments (2)

Collapse
 
magenot profile image
Magenot

This is so awesome! I am self-taught as well and never thought about creating a journal about all the fun things you learn along the way. I even ran into similar issues you mentioned and tackled it a different way with React & media queries.

Collapse
 
jteacodes profile image
jteacodes

Thank you! It's definitely been helpful documenting, I can see myself growing and getting better. Interesting, I haven't learned React yet so I'm not sure how to use it and I think I've seen media queries used before.

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.