Web Development I


Columbia College Chicago | Spring 2020

Assignments

04: Portfolio II

Prompt:

Points: 15

We have our basic folder structure for our Web Development portfolio site, but it's not really linked, and it doesn't have any styling yet. The goal of this assignment isn't necessarily to make your website beautiful, it's just about making sure it has some basic styling, and that everything is linked together properly.

Summary:

Building on the portfolio setup you did for assignment 03, make your website look and function like an actual website.

Guidelines:

  1. Create a basic navigation menu on each of your “top-level” pages (your “top level” pages are your assignments page and about page)
    1. Each link in the menu should link to the correct page
    2. Make sure each page has the same menu with working links (Note: you can copy and paste your menu to each page, but you might have to change the filepaths for the links when you do that so that your menu works on each page.)
  2. Add a <p> tag to each page
    1. Write some content in the <p> tag explaining what that page is about
    2. Create a folder structure that matches the diagram below (don’t worry if you haven’t complete assignment 05 yet, that’s just there as an example)
  3. Create some basic CSS styling for your website by editing the style.css file in the css folder inside your docs folder.
    1. Link the style.css file to each index.html file to see your css styling on all your pages
    2. Make your website only take up 70% of the “viewport” (the viewport is the screen space; the stuff currently displayed in your browser window)
      1. Style your <body> section in CSS with width: 70vw;
    3. Center your <body> section so your web content is in the middle of your page (the text itself doesn’t have to be center-aligned)
      1. Center your <body> section in CSS with margin: 0 auto;
    4. Change the font on your website from the default (Times New Roman)
    5. Give your <body> section a background color
  4. On your Assignments page, link to each assignment you’ve completed so far.
    1. You can link to the actual web pages you’ve created in your Repository OR
    2. You can link to assignments you’ve completed in Codepen

How to submit:

Commit and Push your changes to GitHub using the GitHub Desktop app and paste the link to your home page in Assignment 04 in Canvas. Make sure the link you post is the link to the website, NOT the link to your Live Server version hosted locally:

  • http://127.0.0.1:5500/docs/ (this is your localhost link. It’s not accessible online, so don't share this to Canvas)
  • https://username.github.io/your-repo/ (your home page link should look something like this! Share this one to the Canvas assignment.)

How to receive full credit:

  • The link you submit should take me to your home page. MAKE SURE TO TEST YOUR LINK BEFORE SUBMITTING.
  • Each link I click on in each page’s menu should link to the correct page.
  • Your CSS styling should match the screenshots below
    • Width of each <body> should be 70vw
    • Content of the body should be in the center of the page
    • Font should not be the default Times New Roman
    • There should be a background color
    • Feel free to use whatever colors or fonts you'd like!
Home page
Home page
About page
About page
Assignments page
Assignments page

Tips for getting started:

  • For help linking your files in your menu, check out the file-linking video in the catch-up guide
  • Remember, you only need to create your CSS on one page: style.css. You can link that css stylesheet to any html file you want to apply your style to.