For this exercise, we are going to make a website that looks like this:
First, please download the necessary image and text files.
Unzip the file and then rename the folder to yourname-gibson-gallery. Inside this folder is an images folder, and a textfiles folder. Inside the text files folder are six text files.
Open this folder as a new project in Visual Studio Code.
Now, follow along with the steps in this Loom video series.
There are nineteen short (or semi-short) videos that take you through most of the steps in building the site.
Your Task: Complete the Site
Video Number 20 describes your remaining task. I will also summarize here what needs to be done.
- Footer change 1: site name smaller, in capitals (via css), with letter-spacing tweak
- Footer change 2: underlining in hover state for pages menu
- Footer change 3: spacing between site name, menu, back to top link
- Footer change 4: link back to top, round, pink background, with dark blue hover, centered, no underlining in the link
- Smooth Scroll Behaviour in back to top link
- Models pages: on each put the appropriate image and h2 text. You do not need to change the paragraphs (ie that can be the same on all pages)
- Header + Footer: make sure all links on all pages work.
Some of these tasks will require a bit of google assistance…
Think carefully about paths. Likewise, think carefully of the most efficient way to get these tasks done.
Duplicating files will make your task simpler. Think carefully, however, of when to duplicate.
Test the whole site before handing it. Look for broken paths to images or in file links.
Have fun.
When You Are Done
When you are done, make sure that you named the folder correctly (as described at the start of this document), then zip the folder, and hand it into our class hand-in area.
Langara: Brightspace | Emily Carr: Moodle