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!!
Bulumko Papu
@bulumkopapuAll comments
- @nickcarlisiSubmitted about 3 years ago@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 - @bolanleolaSubmitted over 3 years ago
Hello Everyone!
I was able to complete the second challenge on HTML and CSS.
Your reviews will be much appreciated.
Gracias!!
@bulumkopapuPosted over 3 years agoI love the responsiveness of your code.
I would look into using the max width property on your cards to make them have the same dimensions as the cards on the design. Also I would add "border: none;" to your button class to make sure it looks like the one on your design.
Great effort!
0 - @alexvillhenSubmitted over 3 years ago
- @MostafGomSubmitted over 3 years ago@bulumkopapuPosted over 3 years ago
Nice effort
Ive skimmed through your code an I see you are using min-width a lot. Try to incorporate the max-width property on some of your classes and elements so that they can truly responsive throughout.
Have a great one
Keep pushing
0 - @mrdiegodevSubmitted over 3 years ago
Any feedback is welcome :)
@bulumkopapuPosted over 3 years agoGreat design!
Your header image does not fill the screen at 766px or so. Would look into trying to make it fill the width of the screen or viewport somehow. May making it fill 100% of the container its in?
Overall great work!
1 - @AyanorIISubmitted over 3 years ago
Feedbacks?
- @natalliasdhSubmitted over 3 years ago
- @RingoFloydSubmitted over 3 years ago
This is my first challenge submitted. I am fairly happy with the desktop design, although there is a border on the right I would like to remove that I can't seem to get rid of.
I have also not been able to make the design responsive for tablet and phone screens and I would appreciate any help anyone can give me.
@bulumkopapuPosted over 3 years agoHey REINHARDT great work. Getting a design to be responsive is much easier than it use to be.
Check my code out here and see how I went about developing the meet landing page: https://github.com/bulumkopapu/meet/tree/master
Checkout these resources below they should point you in the right direction:
-
Flexbox: https://www.youtube.com/watch?v=fYq5PXgSsbE
-
CSS Grid: https://www.youtube.com/watch?v=9zBsdzdE4sM&t=2s
-
CSS Media queries: https://www.youtube.com/watch?v=yU7jJ3NbPdA
0 -
