Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Base apparel, took me a while

@maenad

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am very very very rusted with JS, I don't love it that much.

BAD:

  • Actually I could not make the message not appear more than once.
  • I could not add the background properly. Still looks good.

GOOD:

  • Done mobile first

Community feedback

Shashi Lo 1,345

@shashilo

Posted

Hey Abigail. It was a good try with this solution. The hardest thing is to complete something. You will only improve from here.

Here are the things you can improve:

  • Paying attention to the details of the design. You're missing the main background image, content letter-spacing and line-height are incorrect, submit button styles are off, etc.
  • The mobile first approach is more than just making sure mobile is important. It should be a progressive advancement and graceful degradation. This translates to how you setup your DOM elements, mobile should not need any crazy display, position, or manipulation. That's the graceful degradation. The progressive advancement is as you move up in screen size, you add more complex CSS to style the site to match the screen. It's a lot easier to manipulate a desktop style than it its a mobile one.

All in all, keep coding!

1
Pierre 120

@Cezzane

Posted

You got a bug on validation , try this: put the error message in html then on css display:none so on js you only have to display it and don't print it every time.

0

@ovidiuantonio

Posted

Hello, nice solution! Good job doing the email validation! You can add the background image to the body and set its size to cover to fill all the space. You can try to make the website for the tablets the same as the one for phones because on the ipad pro it doesn't look that great!

Happy coding! Keep going!

0

@maenad

Posted

@ovidiuantonio

Hello! Thank you very much. By any chance you know the width for tablets? I always find different info online and it gets really confusing.

Thanks for taking the time to give feedback!

0

@ovidiuantonio

Posted

@maenad I use these widths in any project i make:

  • 0-600px (mobile)
  • 600-900px (tab port)
  • 900-1200px (tab land)
  • 1200px (large screens)
1

Please log in to post a comment

Log in with GitHub
Discord logo

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