Frontend Challenge #11, Intro Sign Up Form
Tags: devjournal, webdev, codepen, challenge
Published: 2022-01-09 13:53:53

Follow me as I describe the lessons I learned in form validation, design responsiveness, and a few small CSS tricks I pick up. This is my #11 frontend focus project in a few months from [Frontend Mentors](https://www.frontendmentor.io/home). 

The goal is to build this:

![Frontend Mentor design to be built](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs331t003qf9b5t4x5hr.jpg)

## Step 1: Setup the initial mobile layout’s sections
I like to use random background colors to visual show the sections. This gives me a chance to think through the responsive design, possible content placement, setting up CSS variables, and gathering resources like fonts.


![Visual showing sections color coded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7mlkqc7vh6r6rjn5kn4.PNG)


![Initial layout with color coded sections](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvbmw2to6ioyd8qbgjbr.PNG)

## Step 2: Include all content with no styles
Similar to laying bricks for a wall, I like to add all HTML elements and content one section at a time without worrying about styling. My opinion is this gives me the opportunity to focus on content placement and finding the correct HTML elements.

As usually,  I’m attempting to learn the [BEM (Block Element Modifier)](https://en.bem.info/methodology/) method of naming/structuring styles. 


![Screenshot of app with no styling, only content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzyflowsmws6dbdbsrbj.PNG)


![Screen shot of code with a focus on BEM naming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i148hiez9ac70ontuxnj.PNG)

## Step 3: Add styles to the mobile responsive layout
The goal is to focus just on the mobile layout for now. Can I get the components to look like the given design. In the process of doing that, I picked up a few new CSS tricks. 
1. I learned to use **“white-space: nowrap”** to ensure a group of text is always on the same line.
2. I can’t believe I’m just learning about the CSS Flexbox’s **"gap"** style that adds whitespace between the child elements. 
3. The CSS style **“text-indent”** is awesome

I did find an issue I don’t understand. For some reason, if I set the font size and family in the body style tag there is no impact.  I have to set it for each section. Not sure why, but it works. 

![Screen shot of the site in mobile view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3mh6c6740leh4malp3c.PNG)

## Step 4: Transition to the desktop responsive layout
In theory, optimizing for a desktop responsive layout should be easier once you have successfully styled for mobile. It’s mainly moving the sections around and tweaking minor elements.

What I quickly realized is several styles I placed within the media query for wider than 700 pixels actually belong in the general styles. Styles like max-width, justify-content, and align-items were universal to all size layouts and were necessary for smooth design responsiveness.


![Visual screen shot of desktop layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkssm0r1kcvbiobdc3nl.PNG)


![Screen shot of styles to implement desktop responsive design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6i1mkhfgmvyh3pvy7fww.PNG)

## Step 5: Error Messages
What I surmised from the given design is to apply the invalid state AFTER the user clicks the submit button. Instead I did a hybrid approach. As the user input data, the input element will actively respond with validation colors. When the user presses the submit button, invalid error messages will become visible. 

I use LOTS of resources to learn effective styling and JavaScript code to implement the above plan. You can find the resources within the **Resource Used** section. I learned how to apply styles to valid and invalid states of an element based on the focus, validity and the CSS pseudo style “not(:placeholder-shown)”. 


![Desktop layout with error messages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivcy4z49aj92jx7cuvdz.PNG)

## Step 6: Final Outcome
The final step in the process was adding background images and fixing the drop shadows scatter throughout the design. 

[GitHub repository](https://github.com/jcsmileyjr/Intro-Signup-Form)
[Hosted Demo to play with](https://jcsmileyjr.github.io/Intro-Signup-Form/)
FYI: The design didn't ask for the sign up button to do anything or have a change in state. 


![GIF of the app's final outcome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sz93mfd7zw8ckkoi9eh.gif)

## Resource Used
1. [BEM ](https://en.bem.info/methodology/)
2. [Box shadow generator](https://cssgenerator.org/box-shadow-css-generator.html)
3. [Form's inputs with W3Schools](https://www.w3schools.com/css/css_form.asp)
4. [UX for Form Validations from CSS-Tricks](https://css-tricks.com/form-validation-ux-html-css/)
5. [Form Validation concepts from Digital Ocean](https://www.digitalocean.com/community/tutorials/css-styling-form-input-validity)
6. [W3Schools JavaScript tips on getting elements by tag name](https://www.w3schools.com/jsref/met_element_getelementsbytagname.asp) 
7. [GeeksforGeeks JavaScript tips on looping through HTML collections ](https://www.geeksforgeeks.org/htmlcollection-for-loop/)  
8. [StackOverflow for checking validity](https://stackoverflow.com/questions/5846382/a-way-to-check-validity-of-html5-forms)
9. [Free Code Camp tips on HTML5 Validation](https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/)


## Thank you for reading, let's connect:
Obviously, this isn’t a perfect solution. If you have any advice or criticism please leave a comment or send it privately via a DM.

Thank you for reading my learning journey and if you have tips, please DM me on [Twitter](https://twitter.com/JCSmiley4) or [LinkedIn](https://www.linkedin.com/in/jcsmileyjr/).