Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

BASE APPAREL COMING SOON using CSS, Vanilla JavaScript, and BEM

Ken•935
@kenreibman
A solution to the Base Apparel coming soon page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


❤️‍🔥 INTERACT WITH MY PAGE FOR A SURPRISE

WOW - this was a really fun and challenging project. It looks so simple but the styling had my brain in knots. Getting better at Vanilla JavaScript.

I hope to complete more JS projects on here. I also personally did not like how low resolution the hero images are. It bothers me how blurry it gets when I use my 4k monitor.

🔥 ANY FEEDBACK IS GREATLY APPRECIATED!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart
    Posted over 3 years ago

    Hey, great work on this one. Desktop layout looks really great, the site is responsive as well, though I early suggest to make the mobile breakpoint a bit sooner because at like point 770px, the image is too thin, so making that transition would prevent that or maybe letting the left-side resize as well. Mobile view looks great also.

    Some suggestions would be:

    • If you somehow inspect layout in dev tools at the bottom, the image is not occupying the full height of the screen thus its upper part is being hidden. So a quick fix, on your img tag, instead of using height: 100vh which is a bad styling, use min-height: 100vh so that it will scale properly.
    • If you use a primary header make sure that it is outside the main tag so that it will be treated as one of you primary landmark. For this one, it would be better to use :
    <header />
    <main />
    

    With the header being absolute on the top so that it won't affect the layout of the main.

    • Use only the website name as the website-logo alt value.
    • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
    • I would use a descriptive alt on the lady's image since if you look at it, the lady is somehow using clothing on the base-apparel, maybe she is showcasing the clothing, those ornaments.
    • On the h1, you don't have to use br to make each text wraps on another row. You can use max-width on the h1 itself and adjust it until each text are wrapped on their own row.
    • The button inside the form should be using type="submit". Remember that when a button is placed inside a form element, it defaults to type="submit". So imagine if you have a close-button inside the form without specifying type="button" click the close-button will submit the form. Be aware of this kind of scenarios.
    • The error-icon is only a decorative image. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
    • Right now, the error is only seen visually but not really linked with the input itself. For a proper error, message, it would look like this pseudocode:
    if ( input is wrong )
      input.setAttribute("aria-invalid", "true");
      input.setAttribute("aria-describedBy", id of the error-message);
    else 
      input.removeAttribute("aria-invalid");
      input.removeAttribute("aria-describedBy");
    

    The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy. Have a look at this accessible form snippet that I have On this one, you can see aria-live is used as well to inform the user right away on what is the status of the form submission.

    Aside from those, great job again on this one.

    Marked as helpful
  • Jimmy Hoang•870
    @JimmyHoang296
    Posted over 3 years ago

    hey man :)) really fun

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub