English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 57m | 611 MB
When developing any responsive website, typically you know the ins and outs of HTML5, CSS3, and SASS. This course teaches you how to implement responsive images using both image and picture tags that you can use in your next web development project.
At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and SASS. In this course, Hands-on Responsive Web Design 2: Responsive Images and Sliders, you’ll learn the skills you need to implement responsive images using source set (srcset), and change images based on device pixel density and image width. First, you’ll explore how to use the picture tag to target images based on media queries. Next, you’ll dive into how to automate the creation of multiple sized images using Photoshop. Finally, you’ll discover under what circumstances you should implement them. When you’re finished with this course, you’ll have built several functioning examples, which you can use in your next project. Software required: Brackets, Koala.app, and Photoshop.
Table of Contents
01 – Course Overview
02 – Overview
03 – Pixel Density
04 – Overview
05 – Building the Background Header Images in Photoshop
06 – Adding the Header Background Image in the CSS
07 – Building and Adding the Scaling Body Image
08 – Testing the Page
09 – Overview
10 – Building the Different Sized Logos
11 – Adding the Logos to the Web Page Header Using SRCSET
12 – Testing out Site on Multiple Browsers and Devices
13 – Overview
14 – Creating Images in Photoshop
15 – Building Newspaper Columns
16 – Using SRCSET for a Content Image
17 – Testing Page and Recommendations
18 – Overview
19 – Image at 50 Percent Page Width
20 – Image at Multiple Page Widths
21 – Testing Page on Multiple Browsers
22 – Overview
23 – Portriat Hero Image Using Art Direction
24 – Portriat and Landscape Hero Image Using Art Direction
25 – Introducing the Picture Tag
26 – Testing and Page Size Review
27 – Overview of Lazy Loading
28 – Lazy Loading with JavaScript
29 – Lazy Loading with Responsive Images
30 – Overview of Sliders
31 – Build a Slider with One Set of Images
32 – Build a Slider with Responsive Images
Resolve the captcha to access the links!