Skip to content
Submitted 5 months ago

Base coming soon page (HTML + CSS + JS)

Martin•290
@Shanahan914
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

What are you most proud of, and what would you do differently next time?

Went with a mobile-first process this time which I think was a success.

What challenges did you encounter, and how did you overcome them?

Main issue was 1) trying to get the image to fill the appropriate area on the desktop version; and 2) getting the logo positioned correctly on both desktop and mobile. Found relevant materials online and just played about with potential solutions.

What specific areas of your project would you like help with?

Any thoughts on my solutions to the image and logo as I've outlined in the challenges I occurred.

Community feedback

  • SinanFischer•30
    @SinanFischerPosted 5 months ago

    Hey man, good work!

    I took a look at your project and noticed a few little things. Looks solid, but there is still room for improvement. I'll list them for you.

    1. when hovering over the submit button, the cursour is an arrow. It should be a pointer. Which makes the clickable icon clear to the user.

    2. try to give the <p> a little more line-height. So that it looks more like the design. Otherwise it looks good!

    3. your <header> is inside the <articles> and also <mains> The header should be in the body, but not in an article tag or in the main content. He explained it well. It should be done only in specific cases. Feel free to take a look: https://stackoverflow.com/questions/20470345/should-the-header-and-footer-tags-be-inside-the-main-tag

    4. try to center the icon inside your submit button. It is not centered.

    5. the button still looks a bit too lumpy. Give it a little more width and a larger border radius. As specified in the design.

    6. wrap your form (input & submit button) in a <form>

    • This improves semantics and accessibility for users with screen readers or other assistive devices.
    • In the case of a real project, you can use it to better control data transmission and processing.
    • and more...
    • I can recommend this article https://www.the-art-of-web.com/html/html5-form-validation/
    1. did Frontend Mentor create the inline styles in Index.html? This should be avoided when going live. But okay for a practice project.

    I hope the feedback helps you! I like your code, keep up the good work!

    Translated with DeepL.com (free version) - Greeting from Germany :)

    Marked as helpful
    0
  • SinanFischer•30
    @SinanFischerPosted 5 months ago
    1. try to center the icon inside your submit button. It is not centered.

    Please don't misunderstand. Of course it is centered. But it's not evenly centered, it's a bit more on top. This is often overlooked in projects. Comes from little spaces inside the svgs oder by text from font styles

    1

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