link Source: www.udacity.com
list 2 sequences
assignment Level : Introductory
chat_bubble_outline Language : English
card_giftcard 1 point
Users' reviews
-
starstarstarstarstar
0 reviews

Key Information

credit_card Free access

About the content

Did you know that images account for more than **60%** of the bytes on average needed to load a web page? In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device. Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

more_horiz Read more
more_horiz Read less
dns

Syllabus

Lesson 1 - Getting up and Running

Before you start working with responsive images, you need to start debugging on your mobile devices. This lesson will help you get started with Developer Tools and mobile debugging.

Lesson 2 - Units, Formats, Environments

You can't optimize what you can't measure. In this lesson, you will start with comparing different kinds of images on the web and getting familiar with different units you can use to scale them. You will also get a chance to set up your development environment so that responsive images become a painless part of your workflow. At the end of the lesson, you will start working on the responsive blog project, where you have a chance to apply responsive image principles in a real-world scenario! Topics covered: * Sizing Images * File Types * Automation Tools

Lesson 3 - Images with Markup

Not all graphics need to be .JPGs or .PNGs. This lesson dives into using markup techniques like CSS and icon fonts to create responsive graphics. While markup techniques are awesome because they are natively responsive, they are often **extremely** lightweight, requiring a fraction of the bytes of traditional images! At the end of the lesson, you will replace extraneous images with markup techniques and take advantage of font icons to add social media icons to the responsive blog project! Topics covered: * CSS Techniques * Inlining Images * Unicode * Icon fonts

Lesson 4 - Full Responsiveness

Here comes the full monty! In this lesson, you will make your images fully responsive using the new `` element! Along the way, you will use the `srcset` and `sizes` attributes. You will also learn the importance of `alt` attributes for your visually impaired users. At the end of this lesson, you will make the blog project fully responsive, as you implement `` to display beautiful images across a range of device widths and pixel ratios. Topics covered: * `` * `sizes` attribute * `srcset` attribute * `alt` attributes
record_voice_over

Instructors

  • Sam Dutton - Sam Dutton is a Developer Advocate for Google. He also publishes the monthly media tech newsletter medianews.me and maintains simpl.info, which provides the simplest possible examples of HTML, CSS and JavaScript. Sam grew up in South Australia, went to university in Sydney, and has lived since 1986 in London. He has designed and coded lots of websites, including previous releases of itn.co.uk and deccaclassics.com.
  • Cameron Pittman - A passionate educator and programmer, Cameron lives and breathes web development as he creates programming courses at Udacity. Before coming here, Cameron was a combination Director of Content and web developer at Seattle startup LearnBIG. He taught four years of high school physics and chemistry in Nashville, TN, during which time he pioneered teaching physics with the video game Portal 2. Cameron graduated with a degree in physics and astronomy from Vanderbilt University and earned his master's in teaching from Belmont University.
store

Content Designer

Google

Google is an American multinational technology company specializing in Internet-related services and products. These include online advertising technologies, search, cloud computing, and software. Most of its profits are derived from AdWords, an online advertising service that places advertising near the list of search results.

assistant

Platform

Udacity

Udacity is a for-profit educational organization founded by Sebastian Thrun, David Stavens, and Mike Sokolsky offering massive open online courses (MOOCs). According to Thrun, the origin of the name Udacity comes from the company's desire to be "audacious for you, the student". While it originally focused on offering university-style courses, it now focuses more on vocational courses for professionals.

You are the designer of this MOOC?
What is your opinion on this resource ?
Content
5/5
Platform
5/5
Animation
5/5