Welcome! 👋🏼

Frontend Mentor - Intro Component with Signup Form

Frontend Mentor challenges help you improve your coding skills by building realistic projects

Table of contents

• Overview
  • The challenge
  • My Achievements
  • Screenshot
  • Links
• My process
  • Built with
• Author

Overview

This is an entry-level NEWBIE(Free) challenge that uses HTML, CSS & JS

The challenge

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the form is submitted if:
  • Any input field is empty
  • The email address is not formatted correctly

My Achievements

• built the component almost close to the design provided.
• set hover states for interactive elements using Javascript
• customized & added some error handlings for elements using Javascript
  • customized default error msg to be dynamic
  • added character validations according to the input-element's type

Screenshot

• mobile-version

• desktop-version
  

Links

• Solution URL: Frontend-Mentor Solution Page
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox & Grid
• Mobile-first workflow
• custom interactions & validations using JS
• with Visual Studio Code Editor

Author

• Frontend Mentor - @M-lakshan
• Dev.to - @mlakshan