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.
Note: Delete this note and update the table of contents based on what sections you keep.
Your challenge is to build out this 3-column preview card component and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
Desktop View
Mobile View
- I create a project folder structure.
- I then create a "Project" folder and an "Archive" folder.
- I download the Frontend Mentor files to the "Archive" folder.
- I unzip the folder, then I rename the folder to my blog post title and then I copy this folder to the "Project" folder.
- I then rename the "images" folder to "assets".
- I then create a "css" folder as a direct child of the project folder.
- I then create a link to the stylesheet in the of the "index.html" file.
- I then start coding!
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Project Links
- CreatiqueMedia Website - https://www.creatiquemedia.com
- CreatiqueMedia | Ron The Web Dev Blog - https://www.blog.creatiquemedia.com
- CreatiqueMedia Frontend Mentor Solution Page: https://www.frontendmentor.io/solutions/responsive-3-column-card-component-HKAWIl1yJc
- CreatiqueMedia Frontend Mentor Profile - [@CreatiqueMedia] - https://www.frontendmentor.io/profile/CreatiqueMedia
Social Links
- CreatiqueMedia Facebook - [@creatiquemediallc] - https://www.facebook.com/creatiquemediallc
- CreatiqueMedia Instagram - [@CreatiqueMedia] - https://www.instagram.com/creatiquemedia
- CreatiqueMedia Twitter - [@CreatiqueMedia1] - https://www.twitter.com/creatiquemedia1
- Ron The Web Dev Facebook - [@ronthewebdev] - https://www.facebook.com/creatiquemediallc