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
  • assets
    • 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 whimsical 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

💻 Open the Whimsical Board Template here Be sure to open this in a new tab.

💻 In a another new tab, create a new Whimsical Board here by clicking Create new.

💻 Select all 3 sections of the template and copy & paste it to your new board.

💻 Click Share and invite eqbrown@isf.edu.hk to be a viewer of your board.

✅ CHECKPOINT:

✏️ Plan your project in your board:

  1. Create a Mood Board
  2. Write your Site Overview
  3. Design the Wireframe of the desktop & mobile versions

[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 for the mood board
    • I can plan the context, colors, fonts, and content prior to development
    • I can design a detailed wireframe with appropriate elements and include descriptions to explain additional interactions
    • I can update the design specifications over time with a justification as to why changes were made
  • Iterative Development [3]
    • I can track the development of my project by successfully committing to Github at least once per work session
    • I can track my current progress and next steps by writing specific commit messages
    • I can work on my project in small chunks
    • I can successfully implement my wireframe design by the deadline
    • I can consistently update my README.md file with works cited and explaining key design decisions
  • HTML [3]
    • I can use correct HTML elements to structure my site
    • I can write readable code by utilizing indentation and dividers to organize
    • I can use effectively use classes and IDs to target specific elements for styling
  • CSS [3]
    • I can use correct CSS selectors, properties, and values to style elements of my site
    • I can write readable, well abstracted and reusable CSS rules to minimize code duplication
    • I can write CSS that is responsive by using media queries and flexible layouts

[4] Deliverables #

⚡✨ Projects are due on 29 January

  • A Web Design Project Planning Document - Whimsical Board
  • A yourgithubusername.github.io repository

🗓️ Timeline: You have 5 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 Wednesdays during CCA in B403.

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