Responsive page using Flexbox and media queries.
Design comparison
Solution retrospective
I am a newbie in a frontend development, I want to learn and design many more frontend designs. I wanted to learn about how to use the width property for responsiveness, like what units I need to use like pixel, %, rem or someother. Please help me or suggest me how I can improve in this aspect.
I would be thankful if someone can suggest me how effectively I can develop pages responsively, It would be awesome if someone can suggest the ways I can improve by looking into my code.
Thanks, kiran.
Community feedback
- @somaye-beiranvandPosted about 2 years ago
Hello kiran
nice job
just a small suggession
If you used grid for the layout of cards instead of flex it would be much more easier to make it responsive
Here is my solution by grid for this challenge , If you like to take a look:
Marked as helpful1@kiran1095Posted about 2 years ago@somaye-beiranvand Thanks somaye, I will follow your advice. I want to learn more about when to use flexbox and Grid, so I will be greatful if you can provide me insight or examples on it, so it will make me better in understanding and designing layouts.
1@somaye-beiranvandPosted about 2 years ago@kiran1095
you can master them by practicing, reading other's code to get idea how to use them and studying
some user's here write profasioanl codes you can see their projects:
if you see fame wall you can find more excellent programmers
here are some amazing games to learn grid and flexbox:
Marked as helpful1 - @dusan-bPosted about 2 years ago
Hi Kiran,
I just looked at your code and I like your approach building a semantic HTML structure.It's an important part of making a webpage accessible.
Regarding your question about responsiveness, it is much easier to create the mobile layout first, as the desktop layout is usually more complex and requires additional style rules. So, for wider screens, it's a good approach to add media queries with
min-width
.Back to your code, I noticed that you have used the
<label>
element for the headings. This element is most commonly used to describe the purpose of<input>
elements, like "Name", "Email address", "Phone number" etc. For page headings, though, you should use<h1>
-<h6>
elements, whereby<h1>
describes the most important content of the page.I took the
<header>
part from your page to give you an example:<header> <hgroup> <h1 class="heading_1">Reliable, efficient delivery</h1> <p class="heading_2">Powered by Technology</p> <hgroup> <p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful </p> </header>
Also, I noticed that you use rem units for the font sizes, which is great. This way you allow the user to fit the size of the text content regarding the user's browser settings. However, this will have no effect, when you set a font size in px on
body
in CSS. A good rule of thumb is to always use rem for font sizes and em for media queries.Here are some useful articles that will may give you a better understanding about units in web development:
But overall, your code looks pretty good. Keep up the good work, and happy coding :).
Marked as helpful1@kiran1095Posted about 2 years ago@dusan-b , Thanks Dusan. Your review is very helpful for me and I will follow your advice. Thanks and will be very greatful if you can guide me all the way as I will be designing more, to get better and better.
1
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