Skip to content

Latest commit

 

History

History
47 lines (30 loc) · 2.55 KB

MAKEME.md

File metadata and controls

47 lines (30 loc) · 2.55 KB
Raw

Homework Browsers Week 1

Todo list

  1. Presentation Module week 1
  2. Practice the concepts
  3. Homework exercises
  4. JavaScript 30 Refactors

1. Presentation

Prepare a 5-10 minute presentation as described in presentation-module/week1.md

2. Practice the concepts

Before we head into the exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you the basics of the interaction between JavaScript and the DOM:

3. Homework exercises

This week we expect you to do the exercises in the corresponding module/week folder (Browsers / Week 1). Have a look at your class repository on how to hand in the homework.

4. JavaScript 30 Refactors

There's an outstanding series of tutorials called The JavaScript 30 put together by Wes Bos, it's 30 small frontend projects with video tutorials and finished code to study. You will learn a lot from Wes Bos but his tutorials are just the beginning of your study.

All of his finished code is in a single file, the main objective of this module is that you understand what he is doing and learn how to structure your projects across multiple files according to the separation of concerns. After completing his tutorials you will need to take his finished code as a starting point and refactor it into separate folders and files.

To keep track of your progress through the JS 30 and to store your refactored projects there's the following the javascript-30 repo provided by HYF Belgium. In this repo you will find more detailed instructions on how to work your way through these projects, as well as a folder structure for your refactors and a checklist to keep track of your progress. Fork this repository to your own github to serve as your basis.

Your goal for the rest of the curriculum is to refactor as many JS 30 projects into your repository as you can as they show you cool tricks that you can do.

Here are some suggestions to start with:

  • #1: JavaScript Drum Kit
  • #3: CSS Variables
  • #5: Flex Panel Gallery
  • #8: Fun with HTML5 Canvas
  • #10: Hold Shift and Check Checkboxes
  • #13: Slide in on Scroll
  • #16: Mouse Move Shadow
  • #18: Adding Up Times
  • #20: Speech Recognition
  • #22: Follow Along Link Highlighter
  • #28: Video Speed Controller