Mobile first using flexbox for main sections and grid for footer
Design comparison
Solution retrospective
Mobile-first development of the two layouts. I found it very difficult to get the header background image to look like the design without editing the image as it wasn't deep enough. I mainly used flexbox, but for the footer I used grid, which saved so much time. Next time I think I will try and develop the next project with pure grid to improve my skills. I just did the responsive for 375px and 1000px upwards for now. Many thanks Steve
Community feedback
- @brasspetalsPosted over 3 years ago
Hi again, Steve!
Your solution looks good for the widths that you did, but I hope you come back to this challenge at some point to do the "medium"/tablet layout. Not having a design to work off of can be tricky, but is a great challenge and a good way to practice responsiveness. Grid is definitely worth learning - glad to see you starting to use it! 👍 I wish I had for this challenge.
Anyway, just a few, small suggestions:
- To clear up the errors in the report, remove the
name
andid
from the email input (since they have been left blank), and add alabel
. - The header navigation items should be links (simply wrap the text inside your
li
’s in anchor tags), as should “See how Fylo works” and the social icons in the footer.
Looking forward to your next solution - happy coding!
0@stephentyers1975Posted over 3 years ago@brasspetals Thanks for the comments. I agree with everything you said. My plan is to run through all the HTML/CSS challenges first and get them more or less right per the designs. As a complete beginner, I'm learning as I go along, so once I finish all these challenges, I'll go back and improve based on people's feedback.
0 - To clear up the errors in the report, remove the
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