Frontend Challenge #10, Four card feature

Follow me as I briefly describe my coding journey to build the four card feature from Frontend Mentors.

This is my #10 frontend focus side project in two months. This short journey have showed me the accumulative effort of constant learning. This project took several hours off and on throughout a 24 hour time period instead of the usually several days.

The goal is to build this:

Step 1: Setup

I’m a big fan of the software GitKraken. It’s a quick intuitive visual software for making Git commands for a project. My first step in each project is to create a GitHub repository and load the given starter files from Frontend Mentor.

It may or may not help someone but my code editor of choice is Visual Studio Code. A code editor is a fancy text editor that is specialized for writing software. It’s easy to use and I love customizing it to make coding more enjoyable. A must-have extension is “Live Server”. This extension runs a local server that displays your web page in the browser and constantly updates it as you code. This eliminates the time wasting process of manually refreshing the web page to see changes.

Another key setup action is updating the project with all recommended styles from the style guide. This includes creating CSS Variables for colors and searching Google fonts for required font families.

Step 2: Find Key Problems

The main hurdle I saw were four card components in a three column pattern. The columns needed to be horizontally aligned in a row for desktop responsive layout but vertically aligned for a mobile responsive layout.

Step 3: Create a Basic Layout

I’m learning it’s easier to start a web page’s project by laying out the basic HTML elements and content. The trick is no styles. Just focus on semantics.

One of my goals is to practice more meaningful class names. With this in mind, I added BEM inspired CSS class names with no styling included so I can focus on the naming.

Step 4: Visually Style the Header

I like to style from the top down or section by section. In this case, I’m starting with the header.

Step 5: Visually Style the Feature Cards

A tool I used to help quickly make the drop shadow was CSSGenerator.

Step 6: Slowly Work in Desktop Layout Styles

This was the longest process in that I slowly added styles to make the product design responsive for desktop while maintaining the mobile. Over time, I found issues I’ve created like:

1. The card’s width was either too wide or short based on screen size. The solution was to use max-width CSS for the styles and remove lots of increasing media queries with margin styles.
2. The gap between columns was too wide or the cards were touching each other. The solution was to depend less on setting margins and more on using Flexbox to handle spacing.
3. In mobile layouts with higher widths, the feature cards were way too big. Again, the solution was max-width and Flexbox.

Final Outcome

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

Resources used

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