Assignments
03: Portfolio I
Prompt:
Points: 10
Set up the basic folder structure for your website and get comfortable posting your changes to GitHub.
Throughout this course, we will be building small web pages to practice our web development skills. These web pages might be assignment responses, or in-class exercises. Our personal web portfolios will function as individual class websites where we can track our progress and development. The personal WebDev portfolio will be developed incrementally throughout the semester.
Summary:
Create a basic website three-page website hosted on GitHub pages. You will add to this website as the semester progresses.
Guidelines:
- Create a GitHub repository called something like “webdev-1”
-
- Go to github.com and create an account using your .edu email
- Create a new Repository called webdev-1, give it a brief description, and check the box next to “Initialize this repository with a README”
- Click “Create Repository”
- From the repository page, click “Clone or Download” and copy the URL
- Open up the GitHub Desktop app (download that here if you don’t have it)
- Make sure you’re signed into your GitHub account (go into the app’s preferences to sign in)
- Click File → Clone Repository and go to the ‘URL’ tab
- Paste the link you copied from github.com in part d. above
- Choose your local path (this can be wherever you keep your school work) and press the blue ‘Clone’ button.
- Open your repository inside VS Code and create your website folder structure
-
- Open up VS Code (download that here if you don’t have it)
- 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)
- Create basic HTML pages for your 3 index.html files. Each page should include:
-
- Required HTML elements (<!DOCTYPE html>, <head>, <body> (remember: in VS Code, start typing ‘ht’ and then select html:5 from the dropdown menu to get the required elements)
- A title for each page in the <title> tag
- A <h1> tag for the site title (e.g. Doug’s Portfolio)
- A <h2> tag for the page title (e.g. About, Assignments, Home)
- Here's what your basic folder structure should include:
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 03 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.
- Your home page should display the title of your web page
- You should have created all the folders and files in the diagram above in the right place
- Your Home, About, and Assignments pages should look like this (remember, each of those files should be called index.html and placed inside the correct folder):
