The following files are required for this lesson:

Introduction

This lesson will be taught in two parts:

Demo Instructions

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.

Steps - Part 1: Image Optimization

  1. Download the demo-optimized-photos.zip file and extract its contents to a folder named demo-optimized-photos.
  2. Add the code below to the <body> of index.html:
    image-index-01.jpg
  3. Save and refresh in your browser to see:
    image-opt-01.jpg
  4. In your styles.css file add the .photos class style rule:
    image-css-styles-01.jpg
  5. You should now see something like the following:
    image-opt-02.jpg
    Question: What effect did the styling rule have on the output?
  6. Now shrink the width of your browser to get the following:
    image-opt-03.jpg
    Question: Why did the output change?
  7. Now you want to add some spacing between our images. Add the following style rule:
    image-css-styles-02.jpg
    Question: What is the 1 rem?
  8. Refresh your browser and you should now see:
    image-opt-04.jpg
    image-opt-05.jpg
    Question: Any questions relating to the final output?
  9. As before, you need to add some meta data to the <head> of your web page. Add something close to the following:
    image-index-02.jpg
  10. Question: How would different types of images affect the load time of this web page?

Steps - Part 2: SVG

  1. Download the demo-svg.zip file and extract its contents to a folder named demo-svg.
  2. In your code editor, view the browser-website.svg file. What do you notice about this file?
  3. Add the code below to the <p> in the <section> of index.html:
    svg-index-01.jpg
  4. Save and refresh in your browser to see:
    svg-01.jpg
    You will have to scroll to see the full image.
  5. Experiment by increasing or minimizing the output % of the browser. What effect did this have on the display size of the image and the resolution of the image? [Hint: Compare the image to the size of the text on the web page.]
  6. Now, comment out the <img> element you added.
  7. In your code editor, select the browser-website.svg file. Copy all the code that starts with <svg> … </svg> block and paste below the commented out <img> element. Save and refresh your browser to see:
    svg-02.jpg
  8. You will want to be able to scale this. To do this you need to add the following style rules to your styles.css file:
    1. Add spacing to the <section> element:
      svg-css-styles-01
    2. Style the <svg> element:
      svg-css-styles-02
      At this point, save and refresh the browser to see:
      svg-03
    3. Add a hover effect to the <svg> element:
      svg-css-styles-03
      Once again, save and refresh your browser and test the hover action to see:
      svg-04
    4. Now experiment by changing the width and height of the <svg> element:
      svg-05
      Note: the image does not change in size.
    5. Now you can scale the <svg> by scaling the container by commenting out the code you just added and add the following code:
      svg-css-styles-04
    6. Uncomment the <img> element in your **index.html** and the result should look like:
      svg-06
    7. Now change the width and heigh in the .svg class:
      svg-07
    8. For a final comparison uncomment the <svg> style rule so that both the element and the class style rules are being applied:
      svg-08
  9. Even though we set both width and height for the SVG image, the SVG scaled proportionally. For your personal understanding, research if it is possible to scale an SVG with width and height of different values.

Resopurces

Module Home

DMIT1530 Home