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.