Picture Element + WebP

The following files are required for this lesson:

Introduction

This lesson has two components:

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Download the demo-picture-element.zip file and extract its contents to a folder named demo-picture-element.
The completed output should look like when you resize your browser:

Note: At a larger resolution, the images will be larger.
The first step is to add the picture element to index.html:
1. Add the following code just before </section>:
  
  Note: The <picture> element has a built-in media query to swap out the image when the browser width reaches the breakpoint. </ol>

Download the demo-picture-webp-main.zip file and extract its contents to a folder named demo-picture-webp-main.
The completed output should look like:
1. Google Chrome:
2. Edge:
3. Internet Explorer:
4. Firefox:
5. Safari:

Download the demo-responsive-card-component.zip file and extract its contents to a folder named demo-responsive-card-component.
The completed output should look like:
1. Narrow Width:
2. Wide Width:
Modify your index.html with the code shown below:
1. Update the <head> with links to the stylesheets:
2. Add the following div elements:
3. Add a <picture> element:
4. Add the following below the </picture> element:
5. Add the SVG below the paragraph (remember to copy the code from the SVG file)
6. Below the flex container div, add the following (inside the paragraph tags, is a paragraph of lorem ipsum text):
7. Between the two paragraphs, add the thumbs-up-icon.svg (remember to copy the code from the SVG file):
Refresh your browser and scroll to see something like:

Question: What needs to be done next?
Open your styles.css file and add the following style rules:
1. Add some initial style rules:
  </l1>
2. Style the card:
  </l1>
3. Style the SVG:
  </l1>
4. Style the card footer contents:
  </l1> </ol>
Refresh your browser and use a wide width to see:

Question: Now what needs to be done?
You now must add the following media query for the wide width of the browser:
1. Add the following media query:
  </l1> </ol>
Refresh your browser to see the desired output at both narrow and wide browser widths.