development of the web page, starting with html, css and javascript.
Design comparison
Solution retrospective
When developing the page on the desktop I did not have many problems, I used flex-box multiple times, since it is the way that makes it easier for me to position the elements. When making it responsive I had several problems, especially in the header and footer. When doing the 375px it created a horizontal scroll, the header did not fit 100%, the header text did not fit, in the end it did not stay as in the design, in the footer it was only when changing the position of how it was in written, since I used more flex-boxes to put them in position. When making the hamburger menu in the same way, the links moved, apparently when going from responsive to written, the links disappear. The menu links were not in the position of the design in responsive mode. Is it convenient to use some framework when developing the page, be it bootstrap, tailwind, etc, and would it be responsive?
Community feedback
- @brasspetalsPosted over 3 years ago
Hi, Luis! 👋 Congrats on submitting your first solution!
To clear up most of the errors in your report, simply add alt attributes to your images, even if you leave them blank (ex:
alt="").A framework could be used, but isn't necessary for this project. Getting a good handle on normal CSS is really important before jumping into using frameworks. Flexbox and Grid are both more than enough for this challenge, although I think Grid would be easier to use here. If you're new to Grid, this is a great challenge to learn it.
To solve many of your problems, I highly suggest going back and trying this challenge with a "mobile first" approach. The base code would be for the 375px design, and then you would use min-width media queries as you scale up. I've found it to be a LOT easier, even if you're uncomfortable with the approach at first.
If you have any other questions, let me know - and happy coding!
1
Please log in to post a comment
Log in with GitHub
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