In this project you will get a first feel for how JS and HTML interact to make a website. You'll get to put into practice what you study in the exercises, and experience more open-ended challenges and problem solving.
The project is structured to provide you with guided support for certain key concepts while leaving the rest open-ended. The key concepts we will provide support for are:
- User Stories: A User Story is simply something a user can do on your site; ie. "A user can enter a user name and password". These projects will give you a first exposure to building interactive sites around user stories.
- Incremental development: Each week's project is assigned as set of tables. Each table says what you need to write to implement this week's user stories. Your task will be to go down the table writing one user story at a time. Learning to plan in self-contained user-stories is one of the most important skills for making your work easier.
- Structuring Code: The assignment tables will not only split your project into user stories to develop one at a time, but will also outline what code needs to be written for each user story. For JS-1 this means separating the data (variables) from your functions and keeping your JavaScript separate from your HTML.
- Refactoring: "same behavior, different code". It's really that simple at the beginning. If you change the code written in your folder (hopefully to make it more readable!) but can't tell a difference when you open the website in your browser, you've successfully refactored your code. In weeks 2 & 3 you will be asked to refactor the code you wrote the week before into a new structure before adding that week's user stories.
Besides those 4 learning objectives, everything else about these projects is open-ended. As long as you stick to the structures we've provided and develop the user stories in order you are free to explore, experiment, and find your own way. The homework exercises ask you to understand everything you do in depth. These projects just ask you to hack it till it works, so have it!
- project description
- learning objectives
- tracking & feedback
- resources
- a main landing page that links to the other two
- a team page
- a calculator
- Implement learned programming skills in a more realistic use case
- Learn about a project life cycle
- Working on GitHub
- Team work (groups of 2-3)
- Applying what you learn in a realistic context
| emoji | who uses it | meaning |
|---|---|---|
| 〰️ | student | started, in progress |
| ❓ | student | need help (after asking your fellow students!) |
| ✅ | student | you think it's done, check please! |
| ✅ | coaches | homework is checked and OK |
| coaches | homework has a few issues, see comments and keep in touch on a new issue | |
 |
coaches | there's an answer to your question, in the comments and/or an issue |
| 🌟 | coaches | you did something awesome |
and a whole bunch more emojis for fun.
| your Emoji | your comments | coach emoji | coach comments | |
|---|---|---|---|---|
| Home page | ||||
| Team page | ||||
| Calc page |
