Frontend Mentor - Huddle Landing Page with Curves Solution

This is a solution to the Huddle Landing Page with Curves Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Show an error message if the user types an invalid email

Screenshot

Links

• Live Site URL: https://kens-visuals.github.io/huddle-landing-page-with-curves/
• Solution URL: https://www.frontendmentor.io/solutions/huddle-landing-page-with-curves-built-with-vanilla-js-scss-and-bem-AUV7QIWYs

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• CSS Flexbox
• CSS Grid
• Vanilla JS
• Mobile-first workflow

What I learned

That's it, this is the last challenge in JUNIOR level, and I managed to finish the whole section within a month. Which also means that I've reached my goal of finishing all projects in JUNIOR level before the end of the year. I'm really excited about this and what's coming next, in terms of projects and all the cool stuff that I'm going to learn and practice. For the next level, I'm planning to learn React and start the upcoming projects with React, because I feel quite confident in Vanilla JS and DOM manipulations. So, I don't want to miss the chance of practicing React with all those awesome projects in INTERMEDIATE level.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals