Design comparison
Solution retrospective
I am most proud of learning about resposive design. I was able to perform this challenge and complete it using what I learned about working with mobile design and media queries.
What challenges did you encounter, and how did you overcome them?The challenges I face was getting the cards to line up correctly. I was able to overcome them by setting the template rows and columns using fractional units.
What specific areas of your project would you like help with?I would like to know what I can improve in this design and if I need to make any changes in my media queries. I went back and forth between media queries to get it right but I would love the criticism and welcome any feedback on responsive design. Thank you
Community feedback
- @noelhoppePosted 8 months ago
Hi,
- Each site should has only one
<h1>
tag. Suggestion to improve:
<h1> Reliable, efficient delivery <span>Powered by Technology</span> </h1>
- You dont need
.header
. Use insteadheader
in your CSS. Also usemain
insetad of.card
in your CSS grid-template-areas
andgrid-area
can easily replacegrid-row
andgrid-col
. As conslusion your code is readable- Why you have a empty *.js file in your project? :)
1@cloudpc7Posted 8 months ago@noelhoppe I use replit.com to create these so it automatically creates the js file. I can get rid of it or it can be used for future purposes. Thank you for the feedback. I will make the necessary changes
0 - Each site should has only one
- @grace-snowPosted 8 months ago
I hope this is helpful feedback:
- Use one h1 for the heading not two.
- There is no need to wrap that heading in a div.
- Remove the article and use a paragraph.
- All img elements must have an alt attribute (even if it is left blank on these decorative icons).
- You don't need extra divs inside the cards either. Keep the html as simple as possible.
- Get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- The body shouldn't ever have margin.
- If you want to center the content on the page use flex or grid properties don't use large margins like margin top to make it look right on your screen/device. That won't work for everyone.
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