The JavaScript 30 is an outstanding series of 30 video tutorials by Wes Bos. Each tutorial builds a small, interesting project from scratch using plain JS, CSS & HTML. You'll be studying these tutorials to learn about the DOM, events and interactive UIs. You'll also practice refactoring code from one file to many, and building web sites in a group.
The first couple challenges you try to refactor will be very difficult, you will certainly feel like it's much more work than just building the project in one file. And it will be more work! But worth it. Learning how to split your code into separate files is easier to learn now with smaller projects, than later with larger ones.
To help you get started with each project there is a javascript-30-starter template repo you can use. Generate a new repository for each project you study, and you're good to go!
Like the title says, there are 30 challenges. Most of them are full projects with HTML, CSS & JavaScript. But a few of them are for practicing a specific skill. To help guide your study the projects have been sorted out by project and practice.
JS 30 Projects are complete websites with full user interactions. To practice separation of concerns, you will be refactoring the finished code from these tutorials into separate folders and files. You will never need to change the HTML/CSS, just the JavaScript!
Each time you finish one of these projects, check it off (- [x]) and provide a link to your refactored project. If you completed it as a group project you can link to the repository.
- 01 - drum kit
- 02 - clock
- 03 - css variables
- 05 - flex panel gallery
- 06 - type ahead
- 08 - fun with html5 canvas
- 10 - Hold Shift and Check Checkboxes
- 11 - Custom Video Player
- 12 - Key Sequence Detection
- 13 - Slide in on a Scroll
- 15 - LocalStorage
- 16 - Mouse Move Shadow
- 17 - Sort Without Articles
- 19 - Webcam Fun
- 20 - Speech Detection
- 21 - Geolocation
- 22 - Follow Along Link Highlighter
- 23 - Speech Synthesis
- 24 - Sticky Nav
- 26 - Stripe Follow Along Nav
- 27 - Click & Drag
- 28 - Video Speed Controller
- 29 - Countdown timer
- 30 - Whack a Mole
These are for individual study. Because these are challenges without a full user interface, you don't need to do any extra refactoring or project planning. You can put your finished code and notes directly in the ./practice folder of this repo.
- 04 - array cardio day 1
- 06 - array cardio day 2
- 09 - dev tools domination
- 14 - javascript reverences vs copying
- 18 - Adding Up Times with Reduce
- 25 - Event Capture, Propagation, Bubbling
So you're ready to get started? Pick a project, generate a new repo using the javascript-30-starter template and decide if you'll develop alone or in a group. You'll follow a slightly different workflow for each.
If you are studying a project independently you can just get started. No need for extra planning or issues, you can just practice refactoring the code.
One enormous benefit of splitting your code is making it easier to collaborate on the same project. You are encouraged to work in small groups for as many of the JS 30 challenges as you can. When working together you can take a little extra time to practice full collaboration workflows. Using the javascript-30-starter repo, you and your group can create finished project repository with:
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- [ ] [Docs](https://github.com/_/_/tree/_/DOCS.md)
- [/planning](https://github.com/_/_/tree/_/planning)
- [ ] communication plan
- [ ] constraints
- [ ] backlog
- [ ] wireframe
- [ ] development strategy
- [ ] retrospective
- [ ] [project board](https://github.com/_/_/projects/1)After finding a team and picking a challenge, you should work in two phases:
- Independent Study: Each person in your group should study the challenge independently, following the video tutorial and studying Wes Bos' finished example code. After following the tutorial spend some time figuring out on your own how you would split his code into separate files.
- Collaborative Development: After each person in your group has had some time to study the project, get back together and reverse-engineer the same program in a shared repo. You don't need to build the project exactly the same! You can of course choose to implement the project differently or to add new features.
Got a question? Got a tip? Use the issues in HackYourFutureBelgium's fork.
Some guidelines for using the issues:
- Attach a label with the challenge name in kebab case ->
drum-kit, orslide-in-on-a-scroll - Let us know if it's a question or a helpful tip ->
question,tip - @mention someone if you know they have the same question, or think they could help you
- If you create a
questionissue and your question has been answered, please close the issue - Be nice and have fun!
- /wesbos/JavaScript30
- contains many links to people's notes and finished projects
- study.hackyourfuture.be
- Separation of Concerns
- the HYF module where these projects are used
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent