/intro-component-with-signup

Learning Project | Intro component with sign-up

Primary LanguageJavaScriptMIT LicenseMIT

MIT License LinkedIn


Frontend Mentor | Intro component with sign up form solution

This is a solution to the Intro component with sign up form challenge on Frontend Mentor.
Explore the docs »

DEMO

Table of Contents
  1. Overview
  2. Getting Started
  3. License
  4. Contact

Overview

(back to top)

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 message for this error should say "[Field Name] cannot be empty"
    • The email address is not formatted correctly (i.e. a correct email address should have this structure: name@host.tld). The message for this error should say "Looks like this is not an email"

(back to top)

Solution screenshot

Social Proof Section

Links

Built With

React.js HTML CSS3

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

(back to top)

Getting Started


Prerequisites

Node.js - download and install

https://nodejs.org

Git - download and install

https://git-scm.com

This is an example of how to list things you need to use the software and how to install them.

  • npm

    npm install npm@latest -g

Launch locally

Would like to run this project locally? Open terminal and follow these steps:

  1. Clone the repo 
    git clone https://github.com/sgrazys/intro-component-with-signup.git
  2. Install NPM packages 
    npm i
    or 
    npm install
  3. Run the development server 
    npm run start

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Saulius Grazys

Gmail LinkedIn

Project Link: https://sgrazys-sign-up-intro-component.netlify.app/

(back to top)