Media and graphics in HTML: responsive images, SVG, canvas
You choose the right image format and size, add video and captions, and draw with SVG and canvas, keeping media-heavy pages fast and accessible.
Level 301 · 16 lessons · 15 practice labs
Lessons
Images
- Image formats: JPEG, PNG, WebP, AVIF, SVG
- Responsive images with srcset and sizes
- The picture element and art direction
- Lazy loading and declaring dimensions
- Writing good alt text
- Short task: a fast-loading gallery
Audio and video
- The video element: sources, poster and controls
- Captions and descriptions with track
- Embedding with iframes and safe attributes
- Short task: an accessible captioned video
Drawing
- SVG basics: shapes, paths and viewBox
- Styling SVG with CSS and an icon set
- Accessible SVG: title and role
- canvas 2D: drawing shapes and text
- Simple animation with canvas
- Capstone: a media-rich product page
Practice labs
- Declare image dimensions: Add width and height to the images of a gallery that jumps while loading and show the shifting stops.
- Serve the right image with srcset and sizes: Produce four sizes of a product image and prove in the network panel that phones get the small file and wide screens the big one.
- Do art direction with picture: Serve the hero image as a tall crop on phones and a wide version on desktop, with AVIF/WebP fallbacks.
- Pick the right image format: Convert a logo, a photo and a screenshot to suitable formats and compare file sizes.
- Rewrite the alt texts: Write alt text for ten images on a news page by function, marking decorative ones with empty alt.
- Build a fast-loading gallery: Halve the initial load of a forty-photo gallery with lazy loading, declared sizes and suitable formats.
- Add a poster and controls to a video: Place a training video with a poster, controls and two source formats.
- Write and attach a caption file: Write WebVTT captions for a one-minute promo and attach them in Turkish and English with track.
- Make an embedded player safe: Remove unnecessary permissions from a third-party video iframe with sandbox, allow and referrerpolicy.
- Draw a simple SVG icon: Draw a house icon by hand with path and viewBox and show it stays sharp at different sizes.
- Colour an icon set with CSS: Make SVG icons follow the theme with currentColor and use them as a sprite from one file.
- Make an infographic accessible: Add title, desc and a suitable role to a sales chart SVG and confirm a screen reader reads it meaningfully.
- Draw shapes and text on canvas: Draw a badge design on canvas 2D using circles, lines and text.
- Draw a bar chart on canvas: Turn monthly sales read from JSON into a bar chart with scaled axes.
- Make a smooth canvas animation: Write a bouncing ball animation with requestAnimationFrame, fix blurring on high-DPI screens and honour reduced motion.
About this course
You choose the right image format and size, add video and captions, and draw with SVG and canvas, keeping media-heavy pages fast and accessible.
What you will learn
- Images
- Audio and video
- Drawing
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.