November 3

• Reminder: Must have flexbox homepage ready. Will be graded separately
• Announcement: artist website's new date  
• Will cover material for the assignment - Fragment ID, Thumbnails, cropping

Review Criteria for Artist Site

• no TNR
• No single column
• Fragment Identifiers
• Images as bullets (see chapter 6)
• Etc.

 

START

Download this file with right-click
Constitution

More practice with flexbox layout

Set up with 2 columns flexbox:
col1 = Article III
col2 = thumbnails; we'll do later today

Practice Fragment ID

Next, we will create a sub-navigation for the 3 sections of Article 3

In 10:30 class, we also did a media query for tablet & below.

Thumbnails for Photo galleries

A thumbnail is used to display a smaller version of an image, thereby saving bandwidth. Often the thumbnail is configured as an image hyperlink which displays the larger image when the image is clicked.

It is important to have two versions of the image -- both small and large--so that bandwidth is not compromised. It may not make a difference if there is only one or two images on the page and you are seeking simply to save space on a page. However, if there is a gallery of images the loadtime can be slowed. Here is an example code:
<a href="large.jpg"><img src="small.jpg" alt="pic"></a>

1. At Google, find 3 pictures. Orientation does not matter
2. At Photopea, make thumbnails. around 200-300 in any direction is norm.