November 3

Review Criteria for Artist Site



Download this file with right-click

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.