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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
desktop view
tablet view
mobile view
- Solution URL: Solution URL here
- Live Site URL: Live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vite
- Sass
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.
I want to learn more about javascript and css transitions and animations
-
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.
- Website - DarekRepos
- Frontend Mentor - @DarekRepos