Design comparison
Solution retrospective
I didn't have major problems doing the mobile layout.
What challenges did you encounter, and how did you overcome them?I still struggle a lot with Grid CSS and had trouble setting the height on wider screens.
What specific areas of your project would you like help with?Any tips with Grid CSS will be of great help.
Community feedback
- @Monika-2509Posted 7 months ago
Congratulations on achieving by finding the better solution despite facing challenges along the way! Your perseverance and dedication have led you to overcome obstacles and accomplish your goals.
Aiming to become strong in CSS Grid:
1.Understanding Grid Fundamentals: Learn about grid containers and grid items: Understand the basic structure of CSS Grid layouts where elements are placed inside a container that has been defined as a grid. grasp the concept of rows and columns: Get familiar with the grid's row and column structure, and how elements are placed within these tracks. Explore basic properties: Start with properties like display: grid, grid-template-columns, grid-template-rows, grid-column, grid-row, etc., to define the grid structure and place items within it. 2.Mastering Grid Properties:
Dive into advanced properties: Learn about properties such as grid-template-areas, grid-gap, justify-items, align-items, justify-content, align-content, etc., to fine-tune the layout and alignment of grid items. Understand flexible sizing: Explore units like fr (fractional unit) and minmax() for creating flexible layouts that adapt to various screen sizes. Experiment with auto-placement: Utilize grid-auto-flow to control how items are automatically placed within the grid, either in rows or columns, and how they behave when the grid container size changes. 3.Creating Responsive Layouts:
Practice responsive design: Learn how to create responsive layouts using media queries alongside CSS Grid. Use features like auto-fill, auto-fit, and minmax () to create grids that adapt to different screen sizes. Explore nested grids: Understand how to nest grids within grids to create more complex layouts while maintaining flexibility and responsiveness. Experiment with combining Grid and Flexbox: Understand the strengths of both layout systems and learn how to combine them effectively to build more versatile and intricate layouts. By focusing on these, you'll develop a strong foundation in CSS Grid concepts and be well-equipped to create a wide range of layouts efficiently and responsively. Remember to practice regularly, experiment with different properties and techniques.
1@souza-vitorPosted 7 months ago@Monika-2509 Hi there! Thank you for the feedback. I'll do more research and practice these concepts you mentioned.
1 - @Lo-DeckPosted 7 months ago
Hi well done for this challenge.
It have a good responsiveness, you need to use more html tag like
<section>
,<article>
.It's better for the screen reader, it's like a guide for them and it's useful for SEO.
<div>
when you don't have any solution or to set the display.Semantic HTML1@souza-vitorPosted 7 months ago@Lo-Deck Hello! Thanks for your feedback! I'll make sure to keep those topics in mind when structuring my content.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord