Skip to content

This is my solution of the challenge - Four card feature section from frontend mentor website

Notifications You must be signed in to change notification settings

DarekRepos/Four-card-feature-section

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Four card feature section solution

This is a solution to the Four card feature section challenge on Frontend Mentor. Frontend Mentor challenges help me improve my coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size

Screenshot

desktop view

desktop view screenshot

tablet view

mobile view screenshot

mobile view

mobile view screenshot

Links

My process

Built with

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

What I learned

I make layouts that work across all devices (tablet, mobile, desktop etc). My workflow become much more efficient but still there is a large area for adjustments.

Continued development

I want to learn more about javascript and css transitions and animations

Useful resources

  • MDN Web Docs - this help me mostly with html and javascript.

  • Sass - it help me with issues like mixin and deploying

  • Lighthouse and Performance Insights Tool in Chrome - i use this tool to check performance and how my website behave on different screens (mobile, desktop, tablet)

  • Can I Use - this is excellent website that help me check if some css like text-rendering support all browsers

  • flexbox game - this game help me exercise basic flexbox layout. This was more fun than reading documentation.

  • grid game - another fun game that help exercise basic grid layout.

  • css boxshadow - i know that i can do it by setting this by myself but this generator show me precisely which value i can set without without unnecessary testing.

Author