Design comparison
Solution retrospective
able to try mobile first approach then failed but somehow managed to fix, I don't think mobile first is the right approach, or I should've not use flex first// next time I would not do a mobile first for this type of project
What challenges did you encounter, and how did you overcome them?transforming flex into grid upon media queries, I'm not sure if I did it correctly because I feel like there are other better ways which has less code
What specific areas of your project would you like help with?I would like to know better ways to approach this project, should I use grid on all medias or is what I did just right which is using flex on this particular project for mobile view then grid on larger screen
Community feedback
- @R3ygoskiPosted 5 months ago
Hello again Louise, congratulations on completing your project, it looks very similar to the proposed design, well done.
Regarding your question, yes, the way you did it is correct. If you had chosen to use
grid
for mobile as well, it would have worked. Usingflex
ends up being simpler than usinggrid
, so I believe the best approach for mobile is indeed to useflex
, as you did.A tip regarding CSS: to avoid having a CSS file with too much content, try breaking it into other files, creating a
reset.css
,responsive.css
, and linking them in the HTML through<link>
(similar to how it is done to linkstyle.css
). This way, you bring extra organization to the project.And about the HTML, I noticed you used several
<h1>
tags, the correct way is to have only one<h1>
tag per page. The best practice would be to use<h2>
and<h3>
for the testimonials, and if you want to include an<h1>
, you can place it outside the cards and usedisplay: none;
to make it disappear (note that this will still allow it to be read by screen readers).Once again, congratulations on completing your project, it turned out really well. If anything I said caused any doubt, please ask below and I will try to help as best as I can.
Marked as helpful1@atheenaoteyzaPosted 5 months ago@R3ygoski thanks so much I didn't know that about h1, and you're right it is more organize if I will put other things on diff css file, will apply this tip on my next projects. thanks again! :-)
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