Creating Web Media
5h 7mIntermediate2017-09-28
Authors
Chris Converse
Applies design and UX principles to technology
Course details
High-quality media is a must for any website. But to keep visitors happy, it has to load fast and look great. Web developers need to be able to balance quality and performance for all types, including graphics, animation, video, and audio. Creating Web Media is a series that will help you create, optimize, and implement media in the most modern way possible. Follow along with Chris Converse to learn new ways to integrate bitmap and vector graphics (including SVG), audio and video, and feeds from social media and streaming video sites into your sites, using CSS, HTML, and JavaScript.
Skills covered
Content StrategyCSSWeb StandardsWeb DesignUser ExperienceProjectWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Welcome to Creating Web Media
1. Creating Web Media
- 02 - SVG symbols with Illustrator
- 03 - The video element
- 04 - Control colors in SVG with CSS
- 05 - High-definition graphics with Sketch
- 06 - Add a Twitter feed
- 07 - Combine images with Canvas
- 08 - Generate assets in Photoshop in no time
- 09 - Web graphics from InDesign
- 10 - Keeping it in proportion
- 11 - Responsive iFrames
- 12 - Create a tiling SVG with Illustrator
- 13 - Create a tiling SVG with Sketch
- 14 - Loop a CSS animation
- 15 - The Audio element
- 16 - Randomized animation with JavaScript
- 17 - Get SVG from Photoshop
- 18 - Customize your thumbnails in WordPress
- 19 - Read JPG metadata with PHP
- 20 - Animate a sprite sheet with CSS
- 21 - Animate a sprite sheet with JavaScript
- 22 - Interactive inline photo gallery
- 23 - Create customizable graphics with CSS
- 24 - Fullscreen background video
- 25 - Load animation with HTML and CSS
- 26 - Video jump points with JavaScript
- 27 - Base64 encoding images
- 28 - Using GULP with Sketch files
- 29 - Responsive images and the image element
- 30 - Responsive images and the picture element
- 31 - Create a sprite sheet for links
- 32 - Indicate download file types
- 33 - Inline video for iOS
- 34 - Image zoom to point of interest
- 35 - Mask an image in SVG
- 36 - Animate an HTML canvas
- 37 - Trigger content from a video
- 38 - Responsive SVG Logo
- 39 - Zooming hover state
- 40 - Animate SVG with CSS
- 41 - Custom Google Maps markers
- 42 - Sprite sheet for animation with Photoshop
- 43 - Sprite sheet for animation with Sketch