Skip to content
Submitted over 2 years ago

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

Romen•50
@romenter
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

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:

  1. 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/
  2. 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
    @pradeeps4iniPosted over 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
    1
    Romen•50
    @romenterPosted over 2 years ago

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

    0
    Pradeep Saini•990
    @pradeeps4iniPosted over 2 years ago

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

    1
  • Kristian Kalvå•360
    @kkalvaaPosted over 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
    1
    Pradeep Saini•990
    @pradeeps4iniPosted over 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
    1
    Romen•50
    @romenterPosted over 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)

    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