Unit05 Images

Overview

For this lesson you will add a third page to your site. You will create a gallery of images that display in rows and columns. Since you are the content creator for this site, you will have to locate several images and crop them to the same width as each other. You will use CSS flexbox to present them as multiple rows and columns. Begin this assignment by duplicating one of your current pages and delete the contents of the <main> tag.

Once you have completed the gallery page, you will need to then use an FTP program to transfer all four pages (index.html, about.html, gallery.html, and mystyles.css) and your images in their proper folder, from your local computer to the web host you purchased for this class. Be sure that you check your work by opening your finished pages on your site. What you see is what we grade.

Vocabulary

Image Resolution

Resolution refers to the number of pixels in an image and can be measured in two ways. It can be the width and height of the image (300px wide by 200px high) or it can be the width multiplied by the height showing the total number of pixels in the image.

Image Optimization

Balancing file size and quality. You must reduce the file size of your images as much as possible without sacrificing quality so that load speed is fast.

Image Compression

Data compression applied to digital images to reduce their file size. JPEG and WebP are formats that take advantage of compression techniques.

Image Formats

Common formats for images in the web include GIF, JPEG, PNG, SVG, and WebP.

Tools

• Check your page using the Markup Validation Service
• Check your page with the W3C CSS Validator

Objectives

At the end of this module, you should be able to...

• Use online PIXLR, free GIMP, or Adobe Photoshop to build a variety of web appropriate images.
• Add an image to a web-page using figure and figure caption
• Implement text wrapping
• Generate a gallery page using flexbox
• Test your site for page size at pingdom

Tasks

• Read about the Design Principle No. 4: How To Repeat Yourself (In A Good Way)
• Read CSS border by w3schools
• Read CSS Padding by w3schools
• Read Margin by w3schools
• Read Float by w3schools
• Read Figure by w3schools
• Read Caption by w3schools
• Read Width Property by w3schools
• Read alt attribute by w3schools
• Read What’s the Best Image Format for Your Website? by John Hughes
• Read Speed Is a Killer

Download

Watch

• Canvas Videos
• Watch unit5a-Unit Overview
• Watch unit5b-Linking an Image
• Watch unit05c-Scaling an Image
• Watch unit05d-Follow Along Intro
• Watch unit05e-New Page
• Watch unit05f-Prepare Images
• Watch unit05g-Add an Image
• Watch unit05h-Add a Gallery Page
• Watch unit05i-Flexbox Gallery
• Watch unit05j-Common Problems

Assignment Example

View an example of this assignment

Assignment Checklists

Follow Along Activity(5 pts)

• Follow along with videos in this unit to create you own version of the "Keto Kooking" Website.
• Rename the completed assignment folder as "05follow-along".
• Upload this folder to your GitHub account and make sure the link works.
• Submit a link to your site in Canvas.

Unit05 Images (10 pts)

New Page

Create a new page that matches the look and feel of your current pages.

• Match the header and navigation of the existing site pages
• Add links from the other pages to this page and from this page back to the other pages
• Set the class of this page link to active

Home Page Image

Please add an image to the home page of your site.

• Place the image inside a figure tag and add a caption
• Float it to the right so the text flows around it
• Set the size to a percentage and the height to auto so the image scales with the page
• Add a caption to the image
• Set the footer to stay below the floated image using "clear:both" in the footer tag.

Image Gallery

For this assignment you will need to locate and download at least 8 images related to your web site subject. Open them in an image editor and crop and resize them all to similar sizes. I recommend that the image be no bigger than 300px tall or 300px wide. If you have Photoshop please use that, if not, you can use PIXLR a web based image editing program.

• Gather and resize a minimum of 8 images
• Place all photos in a folder on your site
• Create a gallery page using these images inside figure tags
• Add alt text for all the images
• Add loading="lazy" for all the images
• Add width and height to all images
• Display the images in rows and columns using Flexbox

Valid HTML markup

Please check your code prior to uploading to see if you missed anything. You should use the html5 code validator.

• Valid HTML5 markup on the new gallery page

Valid CSS markup

Please check your CSS to see if you have any errors (warning are OK). You should use the CSS code validator to check your work.

• Valid CSS for your CSS file

Page Speed

Check the size of your home page and gallery page using Pingdom Speed Tester

• index page is less than 500kB
• gallery page is less than 800kB on initial load

Upload to GitHub

Upload your assignment to a GitHub repository

• Create a folder called "05images" and put the two html files inside it.
• Upload this folder to your "dwdd1600" repository.

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail