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:
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.
While these resources were helpful, a simple spelling error cost me several days of frustrations.
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
While this didn't take a long time, I think I gained some valuable experience.
Use CSS Variables to apply consistent colors quickly
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.
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.
This wasn’t hard but a short grind to make tiny changes to each element’s layout and styled based on the larger designs.
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.
Image of the error results
- How to change an HTML input's placeholder color.
- CSS Grid is great for creating dynamic layouts.
- I still don’t understand SVG and how to use them properly.
- CSS-Tricks blog post on CSS Grid
- CSS Generator tool
- CSS-Tricks blog post on Linear gradients
- CSS-Tricks blog post on CSS gradients
- w3schools documentation on Input's Placeholders with CSS
- Mozilla.org documentation on checking validity
- Mozilla.org documentation on creating event listeners
Obviously, this isn’t a perfect solution. I couldn't figure out the desktop's background image perfectly and other things.