Submitted over 1 year ago

Responsive page using CSS, HTML5, JS, SASS and BEM

#sass/scss#bem

Elio Flores• 400

@elioflo

Preview site View code

This is a solution for...

Ping single column coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
SASS
BEM
JavaScript and the Constraint Validation API

What I learned:

I learn most of how to use form validation. Using the SitePoint post as a source, was easy to write the validation message using Constraint Validation API, and for that needed to skip the default browser validation by adding novalidate to the form tag.

Suggestion ? Any feedback is welcome!

Thank you.

Elio Flores

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted over 1 year ago

Hey there! 👋 Here are some suggestions to help improve your code:

Only the logo, intro heading and paragraph should be wrapped inside the header element.

Your email input needs to have a visibly hidden label attached to it for improved accessibility.

More Info:📚

MDN Email Input

Along with the blank alt tag, you also want to include the aria-hidden=“true” to your “illustrations” to fully remove it from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎄🎁

Marked as helpful

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