ArinzeGit / Intro-Component-With-Sign-Up-Form

Intro component with sign up form

This is my solution to the 'Intro component with sign up form' challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • 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
• 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: [e-mail]). The message for this error should say "Looks like this is not an email"

Screenshot

Desktop version:

Mobile version:

Links

• Solution URL: View the GitHub repository here
• Live Site URL: I have hosted the project on GitHub Pages here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox - CSS web layout model
• Bootstrap - CSS Framework
• TypeScript - Programming language that extends JavaScript
• React - JavaScript library
• Node.js - JavaScript runtime environment
• Vite - React build tool with local development server

What I learned

• I learned the Clearfix CSS technique used to make parent elements wrap around their floating child elements to prevent their margins or paddings from affecting layout of subsequent elements. This technique creates a HTML Pseudo-element after all children of parent element using ::after, then uses CSS attributes clear:both and display:table or display:block to ensure it appears beneath the floating elements and takes up the entire viewport width. This pseudo-element is usually empty and its main purpose is to make the container wrap around it, thereby wrapping around the floating child elements.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

• I learned Regex for my client side form validation. 'Regular expressions' are used for matching text strings. I learned the key concepts like patterns, metacharacters, quatifiers, character classes, anchors and grouping and capturing

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,6}$/;

Continued development

• Bootstrap
• Flexbox
• Typescript
• React

I found these techniques very useful. I will continue focusing on them in future projects to refine and perfect them.

Useful resources

• CSS Clearfix - This is an amazing YouTube tutorial that helped me understand clearfix. I'd recommend it to anyone having difficulties with it.

Author

• GitHub - @ArinzeGit
• Frontend Mentor - @ArinzeGit
• LinkedIn - @Dennings-Owoh
• Instagram - @_.arinze._
• Twitter - @Arinze98433402