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
  • styles.css file
  • media
    • this may include images or videos to showcase yourself or your work
    • you should include media 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] Planning Document #

✏️ You will use a miro board to plan your website before you build it. The purpose of this board is to outline your design specifications and keep track of changes to the design over time

If your design specs change over time, that’s okay! Just be sure to document what you changed and why you changed it on your Miro board

💻 Duplicate the Miro Board Template and share it with the teachers.

  1. Click Web Design Design Specification Document [template] on the top left
  2. Click Duplicate
  3. Share with eqbrown@isf.edu.hk and bgenzlinger@isf.edu.hk

[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: https://github.com/the-isf-academy/emmaqbrown.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
💻 Add the teachers to your personal repository as a collaborators.
  • Select Settings
  • Select Collaborators and teams
  • Selected Add people
  • Add emmaqbrown and brittegenzlinger as Admin

💻 Clone the repository into your cs10/unit01_webdesign folder.

👀 The repository contains the following:

  • index.html
  • styles.css
  • /assets - you should put in photos into folder
  • README.md - keep this up to date with the resources you reference

🌐 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, this site is is hosted at: https://the-isf-academy.github.io/making-with-code/.

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

[3] Criteria #

✅ This project will be assessed on the following criteria:

  • Iterative Development [3]
  • Design Specifications [3]
  • HTML [3]
  • CSS [3]

For each criteria you will be assessed on a score from 0-3

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

[Success Claims]

  • Project Planning [3]
    • I can brainstorm ideas by gathering inspiration from existing personal websites
    • I can consider the user and context of my site
    • I can plan a wireframe with appropriate color palette and fonts
    • I can update the design specifications over time with a justification as to why changes were made
  • Iterative Development [3]
    • I can consistently push my work to Github with descriptive commit messages
    • I can successfully implement my design by the deadline
    • I can consistently update my README.md file with works cited and explaining key design decsions
  • HTML [3]
    • I can use appropriate HTML elements to strucutre my site
    • I can write readable code, by indentation on indendetation and code organization
    • I can use effectively use classes and IDs to target specific elements for styling
  • CSS [3]
    • I can use appropriate CSS selectors, properties, and values to style my site
    • I can write readable, well abstracted and resuable CSS rules, minimizing code duplication
    • I can write CSS that is responsive by using media queries and flexible layouts

[4] Deliverables #

⚡✨ Projects are due on 07 March

  • A Web Design Project Planning Document - Miro boards
  • A yourgithubusername.github.io repository

🗓️ Timeline: You have 6 in-class work days.

You may find it necessary to work outside of school, however if you are focused in class you can complete the project within the allotted blocks. Our office hours are Tuesday during CCA in B405.

CS10.1 DatesAgenda
21 FebProject Intro & Project Planning
26 FebWork Day - Finish Project Planning & Start Coding
27 FebWork Day - Coding
03 MarchWork Day - Coding
04 MarchWork Day - Coding
07 MarchProject Due at End of Class

💻 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.

🤖 For AI, you must use Github CoPilot