jtitak06 / 3-column

Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

This was a challenge from Frontend Mentor. I used this as an opportunity to practice my skills in HTML and CSS.

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

https://ibb.co/3FYCw8G

Links

• Solution URL: https://ibb.co/3FYCw8G

My process

I started by using the HTML code provided. From here, I took the text provided and assigned classes to various text components of this project.

I constructed each column, the layout of the card, and a media query for mobile users in less than an hour. Getting certain elements correct within each column proved to be much more difficult.

I watched online tutorials about how to construct certain aspects of each column. I was less familiar with creating buttons. Therefore, I watched videos about how to compose buttons to resemble the design.

Once the button was designed, I aligned all of the elements in side each column. I did have some trouble centering the flexbox within the screen. However, I asked for advice in the Frontend Mentor chat and was able to solve the issue.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

In this section, I was able to gain a greater understanding of flexbox. I had some trouble centering the flexbox and was able to gain a greater insight on how to appropriately do this.

This was also the first time I created a button so I learned how to change certain aspects of the button to meet the design criteria.

This was great practice to hone my skills as a web developer and I look forward to continuing to grow my skillset.

Continued development

The use of flexbox and responsive layouts will be very valuable for future projects. Also, the use of the button tag will help me utilize this feature in future projects as well.

Author

• Github - Add your name here