/javascript-30

learn to plan and develop small projects in a team

MIT LicenseMIT

JavaScript 30

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!

Index

The Challenges

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.

Projects

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.

TOP

Practice

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.

TOP

Refactoring the Projects

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.

All Alone

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.

In a Group

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:

  1. 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.
  2. 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.

TOP

Helpful Links

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, or slide-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 question issue and your question has been answered, please close the issue
  • Be nice and have fun!

More Links

TOP