Tolux001/column-preview-card

A landing page that display the frontend mentor project

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
  • Useful resources
• Author

Overview

Scored 97% In Google Page Insight https://pagespeed.web.dev/analysis/https-tolux-column-preview-card-netlify-app/g3gyf5iy5r?form_factor=mobile

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

You can use a tool like FireShot to take the screenshot.

Links

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex box
• CSS Grid
• Implementing Mobile-first workflow

What I learned

• The use of .ttf files and the font-display property swap for font, which help for easier accessibility before or immediately the page loads

Perfecting the use of CSS flex box in arrangement of element

Useful resources

• W3Schools - Here you can find everything about web developer that can help improving your web development career from (zero to hundred) level beginner to an expert.

• SelfTeach Blog - This amazing article helps in improving expertise of anyone from level beginner to an expert.

• Hash Node BLog - This is an amazing article can help anyone from a beginner to an expert.

Author

• Website - Toluwalase

• Frontend Mentor - @Tolux001

• Twitter - @Tolux001