Submitted about 2 years ago

base apparel coming soon master - Basic, CSS display flex, redex

Romen• 50

@romenter

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had some problems to face in this challenge that have nothing to do with my dumpness (hehe): There some tips:

The validation email it was not as easy as i thought. You can use if, else, but you going to loss much hours, i recomend you use a redex (if you want to back to your study roadmap). I used: https://emailregex.com/
When i pass in 375 mobile design to 1440px desktop, i had a small dificult (and bigger implementation) to pass correct images. Had a display: none the contrary image do you need in the correct designe (i don't know if i explain good myself, if you had a question, you can contact to me in twitter @romenterga, but i not so good).

If you had some tip to me, please, do it. I am learning, any advice is so f**** welcome

Remember, you study for your future, have a nice code day ❤

Community feedback

Pradeep Saini• 990

@pradeeps4ini

Posted about 2 years ago

@romenter. Well done on completing the project.

I would like to suggest some changes, if you don't mind.

Use semantic markup in HTML. Semantic markup is better for readability and accessability. General container could have been <main> and sub containers could have been <section>.Semantic Markup
To use different size images on different viewport widths, use <picture> element.
Your header image should have a right margin. Use margin-right or margin-inline-start to give some margin to the image.
You can create an utility class. .flex {display: flex}. And use it on the elements that need to have ,"display: flex;" property. This way you don't have to re-write same code in css.

Marked as helpful

Romen• 50

@romenter

Posted about 2 years ago

@pradeeps4ini That's exactly what i was talking about when asking for tips. All noted. Tkn u very much 😀

Pradeep Saini• 990

@pradeeps4ini

Posted about 2 years ago

@romenter You're welcome dude. Have fun learning and implementing more projects.

Kristian Kalvå• 360

@kkalvaa

Posted about 2 years ago

I'm not sure what happened, but when I open the solution in both firefox and chrome it is in a broken vertical layout. Could be just me though …

Regarding the email validation issue: Browsers will validate emails for you if you use <input type="email" validate> on the input field.

Marked as helpful

Pradeep Saini• 990

@pradeeps4ini

Posted about 2 years ago

@kkalvaa That's because the desktop layout kicks in at the breakout point of 1440px. And for his mobile layout, he has used 100% width on most of his content.

Marked as helpful

Romen• 50

@romenter

Posted about 2 years ago

@kkalvaa Ohhh i forgot thats method, tnk u very much kristian. In future (maybe 🤣) i going to fix the code (for be responsive for all wights)

Please log in to post a comment

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