Giter Site home page Giter Site logo

javascript-30's Introduction

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 using these tutorials as a chance to practice collaborative development. Using his tutorials as a starting point, you will work in teams of 2-3 to collaboratively turn each project into a full repository.

The first couple challenges you try to build as a group will be difficult. You'll have many merge conflicts, difficulty dividing the work, and will certainly feel like it's much more work than just building the project. And it will be more work! But worth it. Learning how to collaborate with forks, branches, milestones & issues on small projects you understand completely will help you understand the big picture of project management.

Index


Collaborative Development

Your main objective with these exercises is to practice working with others on one shared code base. For each of the group challenges you should work in a group of 2-3 to break down the project into user stories and create a full project repository one step at a time. A finished project repository will have:

  • A development-strategy.md breaking down the finished project into steps.
  • One milestone per user story, one issue per task, and a project board to organize the issues.
  • One branch per user story, each merged into master
  • The finished code for your project separated into multiple folders and files according to separation of concerns.
  • A live demo on GitHub pages
  • A complete README.md to document your project.

After finding a team and picking a challenge, you should ...

0. Independent Study

Each person in your group should study the challenge independently, following the video tutorial and studying Wes Bos' finished example code.

1. Project Repository

Choose one of your team members to be the Repository Owner, they will create a new repository on their account named after the challenge.

Add the other team members as collaborators so they can manage issues on the main repository's project board.

Each team member should now fork the main repository.

2. Project Planning

Work together to write a development-strategy.md:

  • How do you want to break this project into user stories? (it's okay if there is only one user story!)
  • What's a good way to organize the code for this project? What folders & files make sense to have?
  • What code do you need to write for each user story? Which folders and files will you need to work on?
  • Include a wireframe for your finished project in the strategy file.

Using Pull Requests, make sure each team member has a copy of the complete development-strategy.md on their fork of the project.

3. Project Management

  1. Create one milestone for each user story.
  2. Create one issue for each task that needs to be completed (ie. one piece of code: a single listener, a single handler, a logic function, a style class, ...)
    • Assign it to the correct User Story milestone.
    • Label the issue based on it's concern (ie. handler, logic, listener, style, ..)
    • Assign each issue to one of your team members
  3. Create a new project board in the main group repository and move all of your issues onto the board (the Basic Kanban template project will do)

Developing

Get coding!

  • Develop each user story on a separate branch, merging to master only when it is complete.
  • Each person should complete their tasks (write their code) on their fork. When they have completed their task they should send a pull request with their code to the main group repo.
  • By the time a user story is finished, each team member should have the same code on their fork & branch as the main repository.
  • When a user story is fully merged onto it's branch of the main group repository, merge it to the master branch and move on to the next!

Documenting

After all user stories are complete & merged to mast, and after all of your issues are closed, it's time to put on the finishing touches.

Fill out a complete README.md to document your project and turn on GitHub pages to share a live demo.

Repeat!

There are 24 group projects, keep working your way through them all until you can collaborate in your sleep.

TOP


The Challenges

Like the title says, there are 30 challenges. Most of them are full projects with HTML, CSS & JavaScript - these are for group study. But a few of them are more focused on a specific JS skill - these are for you to study independently in your own repository.

As you work your way through the 30 challenges you should check them off in the lists below and provide a link to the repository with your solution. If it's a group project link to the main group repository, not your fork.

For Group Study

Each time you finish one of these challenges, check it off and provide a link to the main group repository - not your fork! (unless yours is the main group repo.)

TOP


For Solo Study

Each time you finish one of these, check it off and provide a link to the repository with your finished code

TOP


Helpful Links

TOP



Hack Your Future: Belgium

javascript-30's People

Contributors

colevanderswands avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.