Frontend Challenge #9, Base Apparel Component
Tags: beginners, challenge, devjournal, codenewbie
Published: 2021-12-20 02:27:41

Follow me as I briefly describe my coding journey to build the Base Apparel component from [Frontend Mentors](https://www.frontendmentor.io/home). I’m a firm believer in learning in public, not being perfect, and each day improving by 1%. I welcome feedback from anyone and will update the final project as time allows. Frontend Mentors is a online platform that provide front-end challenges that include professional web designs.

**The goal is to build this:**

![desktop design from Frontend Mentors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8e3p1f42sq1v5ymim6k7.jpg)

## Step 1: First Stumbling block, the mobile responsive layout
In my mind, the visual layout can be sectioned into a header, main content, and image areas that are layered differently on the mobile and desktop designs. I needed to use CSS-Grid to move them around based on those two different designs.

This led to my first stumbling block in that I've forgotten how to use CSS-Grid. I revisited several of my favorite resources, [CSS-Tricks](https://css-tricks.com/) and [CSS Generator](https://cssgrid-generator.netlify.app/), for guidance.  

While these resources were helpful, a simple spelling error cost me several days of frustrations. 

![CSS Grid code with error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw7pa09kxxpcov3ecpqm.png)

## Step 2: Lessons relearned in every project
I’m ashamed to say but I just can’t remember CSS variables and routine styling for background images. So I’m explicitly posting this here so I can pull up next quicker. 

_Code block showing CSS Variables_

![Block of code demoing CSS Variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijiuyyhz9v0a76lh2bgf.PNG)


![Block of code demoing CSS Variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/955xfxbxxbho9ykogya7.PNG)

_Code block showing CSS style for background images_

![Block of code demoing CSS style for background images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jn0ypdfaao5zoxhgbqud.PNG)

## Step 3: Styling the content in the mobile layout
While this didn't take a long time, I think I gained some valuable experience. 
1. Use CSS Variables to apply consistent colors quickly

2. There are so many ways to style a header. For this project, I needed it's text uppercase, center align, huge font size, spacing between the letters.

![Block of code demoing styling H1 element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4ffi444gcqkh0pq4ihy.PNG) 

## Step 4: Major pain in the neck was an input field with a SVG inside of it
While this looked simple, my first attempt at using CSS to position the SVG inside the input field failed  miserably. So I burned that code to the ground and started over. This time, I use a div with an input and image inside of it with Flexbox to the rescue.


![mobile design layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cso13tbkidx65d81s61l.PNG)

# Step 5: Desktop responsive layout design
This wasn’t hard but a short grind to make tiny changes to each element’s layout and styled based on the larger designs.

![Desktop design layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhlnup2ft2ojzg2hdb05.PNG)

# Step 6: The final task is developing an active state with JavaScript 
The last task is when a user inputs an incorrect email format into the input field, an error image and message is shown.  I’m sure there are better methods but my default is to  add and remove a “hide” class on an element. I added an additional image within the input field and a label for the message below the input field.
 
_JavaScript functionality_ 
![Block of code showing the functionality](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2hgtyag8lywipb6ecyy.PNG)

_HTML layout for error handling_
![Block of code showing the HTML of the error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2u4tyy6izf1spd3csda.PNG)

_Image of the error results_

![Live demo of the error handling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nz0cnxn86gte580v1fy.PNG)

## Final Outcome

![Finished Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr0t82tj7udkq4cw9jbm.png)
You can find the completed code [here](https://github.com/jcsmileyjr/Base-Apparel-Component) and play with site [here](https://jcsmileyjr.github.io/Base-Apparel-Component/).

## What I learned
1. How to change an HTML input's placeholder color. 
2. CSS Grid is great for creating dynamic layouts.
3. I still don’t understand SVG and how to use them properly.

## Resources used
1. [CSS-Tricks blog post on CSS Grid](https://css-tricks.com/)
2. [CSS Generator tool](https://cssgrid-generator.netlify.app/)
3. [CSS-Tricks blog post on Linear gradients](https://css-tricks.com/almanac/properties/b/background-image/)
4. [CSS-Tricks blog post on CSS gradients](https://css-tricks.com/a-complete-guide-to-css-gradients/)
5. [w3schools documentation on Input's Placeholders with CSS ](https://www.w3schools.com/howto/howto_css_placeholder.asp)
6. [Mozilla.org documentation on checking validity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity )
7. [Mozilla.org documentation on creating event listeners](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)

### Thank you for reading, let's connect:
Obviously, this isn’t a perfect solution. I couldn't figure out the desktop's background image perfectly and other things.

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/).