iearlg / 3-column-preview-card-component

A 30 Days Coding Challenge | Frontend Mentor #6 CHALLENGE HUB | 3 Column Preview Card Component https://3-prev-card.netlify.app/

Frontend Mentor - 3 Column Preview Card Component Main

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
• Author
• Acknowledgments

Overview

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

Mobile size (iPhone SE | 375px)

Desktop size

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Vite.js
• Styled Components - For styles

What I learned

I learned alot from this challenge, as always it's really challenging for me is the responsiveness of the web I really need more practice on that, but I realized that not all styles need to put on the media queries.

Author

• Website - Earl Villapaz
• Frontend Mentor - @iEarlG
• Twitter - @itseaaarloffcl

Acknowledgments

I would like to thanks Frontend Mentor for the wonderful and challenging beginner - guro level web apps challenges. And also I would like to thanks StackOverflow they helped me to solve mostly all my errors I encountered making this challenge.