SVG

SVG Courses

Create Scalable Vector Graphics that look sharp on any device. Learn about Scalable Vector Graphics (SVG) through a variety of courses and resources from Frontend Masters.

Practical CSS Layouts

Jen Kramer
Instructional Designer
Learn to code complex layouts with CSS Grid and Flexbox and tackle real-world exercises like styling buttons, audio players, hamburger menus, and lists.
8 hours, 58 minutes CC
Practical CSS Layouts
drag handle

Data Visualization First Steps

Anjana Vakil
Software Engineer & Educator
Friendly, high-level intro to basic concepts of data visualization using Observable plot.
3 hours, 27 minutes CC
Data Visualization First Steps
drag handle

Introduction to D3.js

Shirley Wu
Data Sketches
Build custom charts with D3.js using data binding with the enter-update-exit pattern. Learn scales and animation between different D3 layouts.
5 hours, 59 minutes CC
Introduction to D3.js
drag handle

SVG Essentials & Animation, v2

Learn how to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!
4 hours, 12 minutes CC
SVG Essentials & Animation, v2
drag handle

Design for Developers

Become self-sufficient for the entire process from concept to design to implementation. Learn the creation & execution of complete front-end experiences!
4 hours, 20 minutes CC
Design for Developers
drag handle

Building Custom Data Visualizations

Shirley Wu
Data Sketches
Learn visualization principles and process for building custom advanced data visualizations with D3.js and SVG with Shirley Wu.
4 hours, 24 minutes CC
Building Custom Data Visualizations
drag handle