Skilled e-learning

Table of contents

• Overview
  • Screenshot and live site URL
• My process
  • What I learned
  • Useful resources
• Author
• Inspired by

Overview

Screenshot and live site URL

Desktop	Tablet	Mobile

Live Site URL

My process

What I learned

1. Naming CSS Color Variables

   Two approaches:

   • Semantic naming based on design role
     Name colors according to their purpose in the UI.
   • Descriptive naming via color picker tools
     If the design role isn't clear, use tools like Coolors and assign a name based on appearance (e.g., --color-indigo).

2. Responsive Images with srcset, Media Queries, and Format Optimization

   How to Combine:

   • srcset for multiple resolutions.
   • media queries to adapt images to screen size.
   • Different formats (WebP, JPEG) and pixel densities for performance.

3. Gradients in CSS

   • Gradients are treated as images, not solid colors.
   • Use the background or background-image property—not background-color.

I got Introduced To

1. CSS Preprocessors (e.g., SCSS)
2. Tailwind CSS

I may choose to use them in future projects.

Useful resources

• Responsive Images – web.dev
• Picture Element & Image Sizes – web.dev

Author

• Github - @AminForouzan
• Frontend Mentor - @AminForouzan

Inspired by

• Skilled e-learning challenge on Frontend Mentor.