@ApplePieGiraffe
Posted
Greetings, Jeanco Volfe! 👋
Well done on this challenge! 👍
Building responsive layouts with clean code can be tricky to figure out when you are first starting. 😅 You will learn most by building lots of components/sites and trying out different approaches, but one or two helpful things for you to keep in mind are,
- If you want to add space between an element and its children, use padding on the parent element. This is better than adding margin to each child because you only have to specify the padding in one place and won't have to worry about margin collapsing (which can be confusing).
- If you want to add space between items in a row or column, use gap. Once again, you'll only have to specify this in one place and the browser will take care of adding space between items if/when they wrap.
- If you can use flexbox to center things/add space between items, I would do so instead of using margin (once again, mostly because of margin collapsing). And also because I find flexbox much easier to understand and work with.
- Margin may be helpful when you need to add different amounts of space between items in a column/row (since using gap would set the same amount of space between everything). I would choose a direction to apply margin in and stick to that for all of the elements in that column/row (e.g., use margin-bottom on each element that needs space between itself and the next item, not use margin-top on some elements, margin-bottom on others, and both on some, etc.).
I would advise going to several well-built sites (or even high-quality solutions that you find on the platform) and inspecting their layout and structure with the dev tools. You will be able to see where their developers have decided to use containers for things, apply margin or padding, lay out elements in a certain way, etc.
Ahmad Shaheed also has several great articles on creating layouts with CSS that you may find worthwhile reading. Pay attention to the examples and how a pro web developer thinks when approaching a layout.
The Art of Building Real-life Components
Inside the mind of a frontend developer: Article layout
The Guide To Responsive Design In 2023 and Beyond
Hope you find this helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful
