/Column-Preview-Card-Component

Frontend Mentor - 3-column preview card component solution

Live site: https://iamronaldosunmu.github.io/Column-Preview-Card-Component/

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

I built a card component for an imaginary website from a challenge I found on frontendmentor.io

The challenge

Users should be able to:

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

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

What I learned

This project helped me solidify my understanding of flexbox and I am glad that I was able to use the block element modifier principles to help me write clean and maintainable css code.

Continued development

For future projects, I will be working on fully fledged websites, I am still new to web development, only 16 years old at the time this project was published, I need to learn react.js to make my websites more interactive, but I am mastering html and css gradually.

Useful resources

  • Mosh Hamedani's course on HTML and CSS - This course was a refresher for my web development skills and taught me most of what I know now, made it very easy for me to complete this challenge.

Author