SVG
Core Concepts
Styling
CSS
Beginner
Explore how to style SVG shapes using `fill`, `stroke`, `stroke-width`, `opacity`, `stroke-linecap`, and `stroke-linejoin` attributes, and understand …
ACCESS_FILE >>Next.js
Styling
CSS
Frontend
Tailwind CSS
Learn different methods to style your Next.js projects, from global CSS and CSS Modules to popular frameworks like Tailwind CSS. Understand when and …
ACCESS_FILE >>SVG
Intermediate
Transformations
CSS
Learn to manipulate SVG elements using fundamental transformations: `translate`, `rotate`, `scale`, and `skew`. This chapter covers applying these …
ACCESS_FILE >>SVG
Advanced
Animation
CSS
SMIL
Bring your SVGs to life with animation! This chapter covers animating SVG elements using CSS transitions and keyframe animations, as well as the …
ACCESS_FILE >>SVG
Project
Animation
CSS
Beginner
Intermediate
Build an animated weather icon set step-by-step, applying core SVG shapes, grouping, styling with CSS, and keyframe animations to create dynamic and …
ACCESS_FILE >>SVG
Project
Interactive
Data Visualization
CSS
Intermediate
Advanced
Construct an interactive bar chart using SVG, HTML, and CSS. Learn to combine data representation with dynamic styling, hover effects, and basic …
ACCESS_FILE >>SVG
Web Development
Frontend
Graphics
CSS
HTML
Beginner
Advanced
A comprehensive learning guide to Scalable Vector Graphics (SVG), covering everything from fundamental concepts to advanced techniques, animations, …
ACCESS_FILE >>Web Components
JavaScript
Frontend
HTML
CSS
Programming
A comprehensive, beginner-friendly guide to native Web Components, covering Custom Elements, Shadow DOM, HTML Templates, and ES Modules with …
ACCESS_FILE >>tailwind
css
css-framework
Tailwind CSS is a highly popular **utility-first CSS framework** that has revolutionized the way developers approach web design. Unlike traditional …
ACCESS_FILE >>