Skilled e-learning landing page

Frontend Mentor Challenge

View Demo · View on frontend mentor

My process

Built with

• Vite - development environment
• Sass - CSS preprocessor
• PostCSS - CSS postprocessor
• Pug - HTML preprocessor
• Eslint - linter
• Prettier - code formatter

What I learned

• Interaction for linear-gradient
• new GSAP animation pattern
• Pug Structuring

Continued development

• Image compression flow using @squoosh/lib
• CSS Interaction
• BEM, CSS Structuring
• SASS Mixin
• GSAP Animation
• CSS Grid
• Svg icons
• Switch favicon between dark and light modes
• Displaying webfont using webfont loader
• Issue-driven development

Useful resources

• Overpass
  I referred to the animation and interaction.