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.
- To verify it's working, type
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/
orassets/
) 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.
- The browser console must be free of errors.
- The HTML must pass the W3C validator test (opens in a new tab).
- The CSS must be responsive and use an accessible color scheme.
- 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 includenode_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.