Submitted
Skilled e-learning landing page
#animation#bem#gsap#sass/scss#vite
Hokuto Kato• 50
@hokuto-kato
Design comparison
Solution retrospective
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.
Message
Any suggestions on how I can improve are welcome!
Community feedback
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord