Mobile first responsive page using HTML, CSS and vanilla JavaScript
Design comparison
Solution retrospective
This is my third challenge and I'm pretty happy with it. The first challenge was simple enough that I didn't really have to worry much about responsiveness. For the second challenge, I didn't use a mobile first approach and after getting the layout looking good on large screens, it fell apart on mobile size(s), and I had to start over again. This time around I used a mobile first approach and it was soooo much easier. Quite happy with the way this turned out, but of course, always open to suggestions for improvements, tips, etc. As for the javascript, I did have to look up how to verify an email address and found some crazy code that I can't imagine myself (or too many other people) coming up with. If there are better ways to do this, please let me know. Thanks!!
Community feedback
- @mattstuddertPosted about 3 years ago
Nice work on this challenge, Nick! I'm glad to hear you found working mobile-first to be a big improvement. I find it a much simpler workflow and find it leads to less code, which is always nice!
As for the email validation, I'd recommend changing the
typeattribute on the input to betype="email". You can then listen for when the form is submitted and use the JS Validity State API to check whether it is a valid email pattern or not.As for improvements, you can see in the design comparison slider a few small sizing and spacing differences with the design, which could be tackled. But it's nothing major.
I hope this helps. Let me know if you have any questions! 🙂
Marked as helpful1@nickcarlisiPosted about 3 years ago@mattstuddert I haven't heard of validity state, but I'm going to look into it now. Thanks for the advice!
0 - @bulumkopapuPosted about 3 years ago
Hey Nick
Great work and dig your interpretation. I like what your JS logic its short and sweet.
Its a pity that Front End Mentor leaves it up to us to decide how the design should look like In-between devices. I find it tricky myself to decide how elements should interact and shift.
I would look into your code that dictates how things look for tablet (768px). If you look at the design file @768px (device width) you'll see that there a specific layout the designer has prescribed. Your layout could use just little bit more tweaking to look exactly like the design at that specific width.
I love your mobile interpretation as well. All in all great stuff!
Marked as helpful1@mattstuddertPosted about 3 years ago@bulumkopapu, just a quick heads up to say that it's often unusual even to get the tablet design in a professional setting. So with mobile, tablet, and desktop layouts provided on these premium challenges, you're getting more than you might normally get in a job.
Typically, if there is any ambiguity around how something should look between design layout sizes, you'd sit with the designer to work through how it should look. So in a professional setting, you'd be able to talk it through with the designer and make sure they're happy with how the layout scales.
As you build more projects, you should find that you become more comfortable with handling layout shifts and how elements should move around 🙂
0@nickcarlisiPosted about 3 years ago@bulumkopapu I agree there are a few more tweaks that I could make to get it just right. Thanks very much for your input!
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