Skip to content

Latest commit

 

History

History
56 lines (35 loc) · 4.03 KB

MAKEME.md

File metadata and controls

56 lines (35 loc) · 4.03 KB
Raw

Assignment Browsers Week 1

Todo list

  1. Prep exercises
  2. Assignment
  3. Extra: JavaScript 30 Refactors
  4. Optional: Side project ideas

2. Prep exercises

Prep exercises are exercises that you should work on before the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your cohort and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did.

Inside your assignment fork, go to the folder 2-Browsers/Week1. At the bottom there is a section called Prep Exercises for you to have a look at.

3. Assignment

This week we expect you to do the exercises in the corresponding module/week folder (2-Browsers/Week1). Have a look at the assignment guide to see how to hand in your assignment.

NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous assignment will be a part of the PR

NOTE: The prep exercise of the previous section does not need to be handed in

4. Extra: 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. This does not have to be done this week, this is a 'when I have time' suggestion!

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

5. Optional: Side project ideas

A part of the HackYourFuture curriculum is to work on as many side projects as you can throughout the time you have. This is a nice way to add extra knowledge to your arsenal and show in your CV that you are motivated to learn new technologies. There are plenty of people available to help you out in the #get-help channel on Slack so definitely make use of that! Have a look at the hyf_projects repo for more details.

5.1 Canvas and WebGL

A very powerful and underused part of HTML is the canvas element. It allows you to create 2D and even 3D graphics. 3D graphics is very complex, but using some of the libraries that are built on top of the canvas API is quite doable at this point of your studies.

Have a go by looking through the libraries and find one that has some cool examples. Try to recreate an example to get a nice basis, you can then add on a couple more features!