Challenge: Try using srcset and sizes to make a responsive webpage.
- [Instructor] Now you try it.…This is a challenge about using sourceset and sizes.…Start by opening the index dot html file…in the exercise files.…Follow the instructions in the comments…of the index dot html page…starting by adding the meta element after line six.…The images you will use for this…challenge are in the images folder.…The first one is a rather exotic relief work.…And it comes in three different widths.…1000, 600, and 300 pixels.…You'll put that image into the webpage…and make sure it takes up 90 percent of the viewport.…
The images to use are images slash arch face 1000 dot jpg.…Images slash arch face 600 dot jpg.…And images slash arch face 300 dot jpg.…The default image should be…images slash arch face 600 dot jpg.…That's on lines 11 through 17.…The other image also comes in three different widths.…800, 500 and 300 pixels.…Make the clock image on lines 26 through 33.…Responsive as specified.…If the browser window is less than 500 pixels,…display images slash clock 300 dot jpg.…
If the window is 500 to 800 pixels wide,…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.