Back

Web Authoring 2 - Final - 2025 - Portfolio Website         20%

Instructions

To Build a multi-page website that includes external CSS Stylesheets.


Video Instructions
Follow instructions on video.

 

Root Directory Structure:

 

1. CSS Navigation Bar- 5% (javascript Nav Bar - 3%)

• All pages must have a fixed nav bar at the top with rollover features on the 4 buttons linking to each page.
  You may use CSS or javascript to create the Nav at the top. CSS will be worth 5 marks while javascript version is worth 3 marks.

• This should be on all pages.

 

2. Home Page - 6%

• Create similar layout with 2 columns, centered on page at 90% width of the page. The Nav bar at the top and a Footer at the bottom of content.
• Photo with wraparound text on left.
• Table with images and text descriptions on the right.
• Apply content for both columns as described in video and seen on photo below.
• Bottom photo on left should have a "Swap Image" Behaviour applied.
• All photos should have a class style with a border and a drop shadow.
• Text Link should be coloured using a css style.

 

3. Portfolio Page - 2%

• Create similar layout with 3 images acting as links to the Image pages with the larger photo. Centered.
• All photos should have a class style with a border and a drop shadow.

 

3b. Portfolio Image Page (x3) - 3%

• Create a similar layout with single large image of artwork.
• All photos should have a class style with a border and a drop shadow.
• Click Image Link to return to Portfolio Page .

 

4. Video Page - 2%

• Create a similar layout including Footer with single embedded Youtube video.
• Video frame should have a class style with a border and a drop shadow .

 

5. Contact Page - 2% (@media Query)

• Create a similar layout with your name in large letters and below it your email contact.
• Create a @media Query at max-width=500 pixels and make an H1 selector set change the colour of your name to Red.

     

 

Refer to video for more details.

 

Compress Root folder and Name file "LastName_FirstName.zip"

Hand in zipped file on CANVAS.