Desktop-first approach with Webpack | SASS | Babel
Design comparison
Solution retrospective
So, this one was a mixture of feelings, rsrs.
I would LOVE feedback on my media queries because I took a desktop-first approach and I REALLY struggled with the mobile layout. For this project I tried to go the extra mile in some aspects, and I used Webpack, SASS and Babel (as transpiler). It was really fun do set all these things up and have a more realistic idea of a real project, feedback on this setup would also be highly appreciated.
The active states didn`t specify anything to be done in case of a valid email, so I threw an alert message and changed the border of the form, just to provide a visual confirmation that the email was accepted.
Is there any other way I could`ve set the height? I had to hard code it because there was an annoying gap below the whole screen...
Anyway, thanks for taking the time to check my solution!
Community feedback
- @darryncodesPosted almost 3 years ago
Hi Tobias,
Decent solution, well done!
This article changed my whole perspective on mobile vs desktop first. I always think of it as designing simply then adding complexity as the viewport increases. I find I write so much less code and it really improves performance.
All the best!
Marked as helpful1@tsirianniPosted almost 3 years ago@darryncodes Thanks mate for taking the time to check this solution. Responsiveness is still tricky for me. I read the suggested article and it is AMAZING. I find the idea of having a basic layout and then setting the specifics for each layout with media-queries really interesting. I'll follow up on the suggestions made in the article and try them out. Thank you, REALLY helpful!
Cheers!
1 - @NADS-PROGRAMMERPosted almost 3 years ago
Hey. I check the preview of your site so the input field seems a little bit off at the right in my screen size, 1920x1080. I notice also when I shrink down the page, the contents' positions are also broken. I highly suggest avoiding using media queries a lot.
Marked as helpful1@tsirianniPosted almost 3 years ago@NADS-PROGRAMMER Thank you for taking the time to check my solution. Yeah, I had a feeling that there were too many media-queries spread across the code (and that's just for one different screen size). That was driving me crazy but I couldn't see other way to do that. I'll dig deeper into responsive design without media-queries, 'cause it's really interesting. Thanksss!
0
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