Frontend Mentor Challenge (8 Part Series)

Follow me as I briefly describe my coding journey to build the Base Apparel component from Frontend Mentors. 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:

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 and CSS Generator, for guidance.

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

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

Code block showing CSS style for background images

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.

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.

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.

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

HTML layout for error handling

Image of the error results

Final Outcome

You can find the completed code here and play with site here.

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

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 or LinkedIn.