Making with Code

[0] Project Overview #

🎨 Design Brief: In this project, you must create a personal website to showcase yourself. It is up to you to decide how to best express yourself and implement that vision.

It should include at least one of the following:

  • personal achievements (e.g. academic, athletic, artistic, etc.)
  • hobbies and/or interests (e.g. culture you identify with: games, movies, music, art, etc. )
  • examples/links to personal projects (e.g. artwork, photography, music, writing, recipes)
  • a portrait of yourself (e.g. photography, drawing, cartoon, etc.)

Your personal website must include:

  • .html files
    • index.html homepage
    • 1 additional .html sub-page
  • styles.css file
  • media
    • this may include images or videos to showcase yourself or your work
    • you may include these in /assets or link them via the web
  • README.md - here you will keep a works cited list with a short description of how you used the resource

You may use and adapt code you find online. However, you must keep track of the resources you used with a short description of how you used it. We will not help you debug huge lines of code you find online and do not understand.

[1] Design Specification Document #

✏️ Find the Design Specification Document in your Google Drive folder. The purpose of this document is to outline your design specifications and justify any changes to the design over time. You should also use a blank piece of paper to hand draw a wireframe. You should include a photo of this in your planning document. This should include a:

  • wireframe - a hand-drawn blueprint that is used to think through the structure of a website
  • color palette - explanation for why you choose it
  • font(s) - explanation for why you choose it

If your design specs change over time, that’s okay! Just be sure to justify what you changed and why you changed it.

[2] Starter Code #

You have the option of hosting your site online using Github pages. Because of this, you will need to create a new repository from a template of the repository into your personal Github account.

💻 Follow along with the teacher to ensure you properly create a template of the repository: github.com/Making-with-Code/example_portfolio.github.io.

  • Select Use this template
  • Select Create a new repository
  • Name the repository: yourgithubusername.github.io (e.g. emmaqbrown.github.io)
  • Select Private or Public (if you want your site to be live on the web, it must be Public)
  • Select Create repository from template

👀 The repository contains the following:

  • index.html
  • page1.html - you should rename this file
  • styles.css
  • /assets - you should put in photos into folder
  • README.md

🌐 If you would like for your project to be live on the web, you must activate Github pages. Every time you push your Github, it will automatically push your website live to: yourgithubername.github.io. For example, the example is hosted at: https://example_portfolio.github.io/.

  • Select Settings on the repo page
  • Select Pages on the left sidebar
  • Select Branch > main > Save

[3] Assessment #

✅ This project will be assessed on the following criteria:

  • Iterative Development [3]
    • I can consistently push my work to Github with descriptive commit messages
    • I can consistently update my README.md file with works cited
  • Design Specifications [3]
    • I can brainstorm ideas by gathering inspiration from existing personal websites
    • I can plan design specifications such as a wireframe, color palette, and fonts
    • I can update the design specifications overtime with a justification as to why changes were made
  • Design Implementation [3]
    • I can write and adapt HTML and CSS to implement my design specification
    • I can write a well structured site using HTML
    • I can write well abstracted style rules using CSS

For each criteria you will be assessed on a score from 0-3. With 9 criteria, there is a total of 9 potential points.

  • 0 - no evidence of the practice
  • 1 - limited evidence of the practice
  • 2 - adequate evidence of the practice
  • 3 - substantial evidence of the practice

[4] Deliverables #

⚡✨ Projects are due soon.

  • A Web Design Project | Design Specification Document - a Google Doc
  • A yourgithubusername.github.io repository

💻 Push your work to Github:

  • git status
  • git add index.html
    • you can add all of the changed files with: git add -A
  • git status
  • git commit -m "your message goes here"
    • be sure to customize this message, do not copy and paste this line
  • git push

[5] Resources #

🔍 Google is your best friend! Especially when it comes to Web Design, it’s not about remembering exact HTML syntax or hundreds of specific CSS properties. It’s about coming up with a design and figuring out how to implement it by looking at examples and modifying existing code.