Web Development – Step 2: CSS Basics

Web Development – Step 2: CSS Basics

Go through the W3C CSS tutorials @ https://www.w3schools.com/css/default.asp. It will give you solid foundation on CSS.

The industry standard is external style sheet. Learn how to add an external style sheet to your HTML page.

Things to note:

  • Different types of selector in CSS
  • Box Model
  • Positioning
  • Display

Assignment 1: Image Gallery

Get 12-16 photographs and create an image gallery. You can find a sample at https://www.w3schools.com/css/css_image_gallery.asp.

You can use your own photography or get free stock photos / creative common license photo from stock photo websites like https://www.pexels.com/new-photos/ and https://pixabay.com/.

The first landing page (index.html) should be a grid of images with image names. Each image must link to a page where user can view full size image, title, and description of the image.

Use your imagination and creativity.

Bonus point: Show the title only when user hover over the image in image gallery.

Create a directory named ‘image_gallery’ and upload your work there.

 

 

 

Leave a Reply