Responsive Landing Page using CSS Grid and Media Queries

Solution retrospective
I am most proud of the fact that I was able to complete this project on my own. This is the very first HTML/CSS challenge that I was able to make in a minimum amount of time period, just taking a few hours. What I would do differently next time is focus more on the different types of displays in CSS. Researching more about Floating Containers, Flexbox, and CSS Grid.
What challenges did you encounter, and how did you overcome them?There were no specific challenges that I encountered since I am aware of the basics of HTML and CSS. The parts that had me lagging was the exact syntax. For example, how to implement an animation (transition) on elements. For that I took advantage of ChatGPT in order to help me revise the concept and hence overcome them.
What specific areas of your project would you like help with?What I need help in is when to use different types of layouts displays (e.g., FlexBox and CSS Grid). It always catches me in confusion as when to apply what technique.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ehsanidev
-
Flexbox is used for one-dimensional layouts (row or column), while CSS Grid is ideal for two-dimensional layouts (rows and columns simultaneously).
-
Use Flexbox for alignment and space distribution in a single direction.
-
CSS Grid is perfect for creating complex structures and precise grid layouts.
-
Flexbox is suitable for navigation menus, lists, and linear layouts.
-
CSS Grid works best for magazine-style layouts, image galleries, and dashboards.
-
Combining Flexbox and CSS Grid delivers the best results for modern layouts.
-
Flexbox is great for internal sections, while CSS Grid is better for overall page structure.
-
Use Flexbox for dynamic items and CSS Grid for fixed structures.
-
To decide, first determine if your layout is one-dimensional or two-dimensional.
With practice and experience, choosing between Flexbox and CSS Grid will become easier.
-
Join 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