Week 1 Assignment

Overview

This assignment is designed to ensure that you have the correct working development environment for the course and have access to the code demos.


Part 1: Development Environment Setup

Follow the Development Environment Setup Guide to configure your machine for this course.

  • Set indentation to 2 spaces for JS, HTML, and CSS.
  • Set up GitHub SSH keys (opens in a new tab) if you haven't already.
    • SSH keys provide a secure, passwordless connection to GitHub and are an industry standard.
  • Install the LTS version of Node.js (opens in a new tab).
    • To verify it's working, type node in your command line to open the Node.js prompt.

Main Task: Screenshot Verification

  • Capture a screenshot of the Node.js prompt on your command line after running the following command:
    • console.log("Hello from 'your name'")
  • Create a directory in your project for static assets (e.g., public/ or assets/) and add your screenshot to it.

Part 2: Accessing & Fixing the Broken Code

Let's test your setup by debugging a simple project.

  • Fork the starter code repository (opens in a new tab) and then clone your forked version to your computer.
  • Fix all logic and syntax errors in the HTML, CSS, and JavaScript files.
  • Organize all static assets (e.g., images from the broken project) into the asset directory you created in Part 1.
  • Add a .gitignore file and include node_modules in it.
    • Most frameworks generate this file, but it's important to understand its purpose.

Part 3: Assignment Submission

Submit the following to the Week 1 assignment page in Brightspace.

  • A link to your GitHub repository in the submission comment.
  • A link to your live GitHub Pages site, also in the submission comment.

Rubric: 15 points (5% of final grade)

Code Quality (HTML/CSS) /5

  • HTML: Semantic tags are used, and the code passes W3C validation.
  • CSS: The design is responsive, uses accessible colors, and demonstrates a clear visual hierarchy.
  • Bug Fixes: Errors in the HTML and CSS files are effectively corrected.

JavaScript /5

  • Functionality: All JavaScript logic and syntax errors are fixed.
  • Conventions: Code uses clear variable names, follows standard casing, and is well-formatted.
  • Console: The browser console is free of any errors or warnings.

Code Management /5

  • Git Commits: At least two commits with meaningful, descriptive messages are present.
  • Documentation: Project files are well-organized and clearly structured.
  • Organization: The Node.js screenshot and all other static assets are correctly placed in a dedicated asset folder.