arrow-left

All pages
gitbookPowered by GitBook
1 of 25

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

resources

hashtag
JavaScript

  • W3: setInterval()arrow-up-right

hashtag
Documentation

W3: Function parametersarrow-up-right
Make a READMEarrow-up-right
Awesome READMEarrow-up-right

learning-outcomes

learning-outcomes

resources

hashtag
HTML

  • W3: Semantic HTMLarrow-up-right

hashtag
CSS

hashtag
JavaScript

hashtag
Git

Net Ninja: Flexbox [video]arrow-up-right
W3: addEventListener()arrow-up-right
MDN: Section elementarrow-up-right
A Complete Guide to Flexboxarrow-up-right
Flexbox Froggyarrow-up-right
W3: Media queryarrow-up-right
freeCodeCamp: JavaScript functionsarrow-up-right
W3: querySelector()arrow-up-right
W3: querySelectorAll()arrow-up-right
How to write better commit messages [blog post]arrow-up-right

project

For this project, we'd like you to build a user interface, using HTML, and populate that with data from a JavaScript object. We've given you a data object below.

Make this project your own, what you build as an interface and how you choose to display the data is up to you.

We'd like you to include ways for the user to interact with the data. For example, you might allow the user to sort the movies by the year they were released, or add a new movie to the movieData object.

This week, we'd like you to start using Git in your terminal.

hashtag
Requirements

hashtag
Data

In your JavaScript file, start by including the movieData object. Here we have four films, which are keys in the movieData object (e.g. "The Darjeeling Limited"). Each of these keys relates to a value with more detail about that particular movie.

hashtag
Git

For this project, we'd like you to get used to using Git from your terminal.

The terminal (sometimes known as the command line) is an interface you can use to navigate file structure, install software, and many other things. It can take a little while to get used to, but can prove much faster than using a GUI. If you're unfamiliar, we'd recommend having a look at .

The steps in using Git are the same you learn in - however, we'd encourage you to follow through to get up to speed.

Allow the user to update the data stored in the object by interacting with the webpage
Josh W Comeau's introductionarrow-up-right
our first workshoparrow-up-right
our second workshoparrow-up-right
let movieData = {
  "The Darjeeling Limited": {
    plot: "A year after their father's funeral, three brothers travel across India by train in an attempt to bond with each other.",
    cast: ["Jason Schwartzman", "Owen Wilson", "Adrien Brody"],
    runtime: 151,
    rating: 7.2,
    year: 2007,
  },
  "The Royal Tenenbaums": {
    plot: "The eccentric members of a dysfunctional family reluctantly gather under the same roof for various reasons",
    rating: 7.6,
    year: 2001,
    cast: ["Gene Hackman", "Gwnyeth Paltrow", "Anjelica Huston"],
    runtime: 170,
  },
  "Fantastic Mr. Fox": {
    year: 2009,
    plot: "An urbane fox cannot resist returning to his farm raiding ways and then must help his community survive the farmers' retaliation.",
    cast: [
      "George Clooney",
      "Meryl Streep",
      "Bill Murray",
      "Jason Schwartzman",
    ],
    runtime: 147,
    rating: 7.9,
  },
  "The Grand Budapest Hotel": {
    rating: 8.1,
    runtime: 159,
    year: 2014,
    plot: "A writer encounters the owner of an aging high-class hotel, who tells him of his early years serving as a lobby boy in the hotel's glorious years under an exceptional concierge.",
    cast: ["Ralph Fiennes", "F. Murray Abraham", "Mathieu Amalric"],
  },
};

project

Your project is to build a fruit shop that lists fruits and allows a user to create a shopping basket. The user can add and remove items from the basket, and can see the contents of their basket on the page.

hashtag
Requirements

For this project, we'd like you to get used to using Git from your terminal.

The terminal (sometimes known as the command line) is an interface you can use to navigate file structure, install software, and many other things. It can take a little while to get used to, but can prove much faster than using a GUI. If you're unfamiliar, we'd recommend having a look at .

The steps in using Git are the same you learn in - however, we'd encourage you to follow through to get up to speed.

Josh W Comeau's introductionarrow-up-right
our first workshoparrow-up-right
our second workshoparrow-up-right

fruit-shop

resources

hashtag
JavaScript

  • MDN: typeofarrow-up-right

hashtag
Code Quality

freeCodeCamp: JavaScript Objectsarrow-up-right
MDN: Object.values()arrow-up-right
MDN: Object.keys()arrow-up-right
JavaScript refactoringarrow-up-right
MDN: Functions - reusable blocks of codearrow-up-right
Career Karma: Guide to JavaScript Commentsarrow-up-right

hobby-page

portfolio

learning-outcomes

learning-outcomes

game

movie-data

project

Your first project is to create a Hobby Page. This can be about one of your hobbies, a particular interest of yours, or a public figure you admire. You are not required to make this about yourself or disclose anything personal. The page will be built with HTML, styled with CSS and use a bit of JavaScript.

hashtag
Requirements

hashtag
Documenting

We'd like to hear about what you created, and how you created it. For this project, you're required to include a README.md file. These are written in and give an overview of the project. You might like to include sections which follow the three headings above: planning; building; and debugging.

alt-textarrow-up-right
Markdownarrow-up-right

resources

hashtag
Getting started

  • Setting up a web pagearrow-up-right

Sections of freeCodeCamp's curriculum used to be a part of our application requirements. The curriculum doesn't cover JavaScript and they estimate it as 300 hours of work in total. Although completing it is not required, it will give you a fantastic foundation in building websites.

hashtag
HTML

hashtag
CSS

hashtag
JavaScript

hashtag
Git

Git has a number of features available, and we're not expecting you to learn them all. During the application stage, we ask that you focus on learning to add, commit, and push your changes.

hashtag
GitHub

project-gallery

MDN: Getting started with the webarrow-up-right
freeCodeCamp: Responsive web designarrow-up-right
freeCodeCamp: Basic HTML and HTML5arrow-up-right
W3 Schools: HTML Tutorialarrow-up-right
freeCodeCamp: Basic CSSarrow-up-right
freeCodeCamp: Responsive Web Design Principlesarrow-up-right
WebAIM: Alt Textarrow-up-right
Oli's intro to the DOMarrow-up-right
MDN: Intro to DOMarrow-up-right
Date.toLocaleString()arrow-up-right
Gitarrow-up-right
Git intro videosarrow-up-right
Version control in VS Codearrow-up-right
Get startedarrow-up-right
Create a repoarrow-up-right
Getting started with GitHub Pagesarrow-up-right
CSS box modelarrow-up-right
GitHub's guide to set up Gitarrow-up-right
GitHub Flowarrow-up-right

project

Build a game using HTML, CSS and JavaScript. This project is open-ended and a chance for you to explore creating something with different complex parts that interact with each other.

hashtag
Examples

hashtag
Tic Tac Toe

Two players compete to get a line of noughts or crosses in a 3x3 grid. Players take turns to place a piece and the game ends when either player has three in a row, column, or diagonal. A draw occurs if no player has got a line of 3.

hashtag
Rock, Paper, Scissors

A player faces off against the computer choosing rock, paper or scissors as their move. Paper beats rock, rock beats scissors, and scissors beats paper.

hashtag
Matching Game

In a grid of tiles, a player flips tiles until they find two that match. Once all tiles have been flipped and matched, the game ends.

hashtag
Planning

Before building the feature, you might like to spend some time planning exactly what it it should do. You might like to draw out the user interface on paper or create some .

Break your feature down into it's constituent parts, don't try to code it all as one monolith. You might like to use separate functions for each large part of the feature. You might use comments in your code to remind yourself what each part is doing.

hashtag
Building

Focus on building one part at a time, and test it as you go. You might use tutorials for different parts, if you are - we recommend trying to write all the code yourself and refactoring it until it makes sense to you.

If you're offered an interview with Founders and Coders, we'll usually ask you to talk through some of your code. Being able to explain what the code does in conversational English is an important skill for any developer.

Copy and pasting or following a tutorial without thinking about what the code is doing will limit what you learn. When you’re finding help elsewhere, aim to build within your own skillset and in a way that makes sense to you.

hashtag
Debugging

You will face errors, challenges and bugs as you build a feature. This all part of being a developer. Knowing what to do when you face a problem is what makes a good developer. Focus on following a path through your code, understanding what is happening at each step, and checking whether you're getting expected results by logging values.

is explaining code aloud to debug and gain a fuller understanding of what is happening.

You'll likely use console.log() often as you work through the project to check what is happening in your code.

Using Google, resources, articles, and asking for help on Discord will all help you when you're in a pickle. Even taking a walk around the block, or sleeping on something can be all you need to resolve a tricky bug.

hashtag
Documenting

We'd like to hear about what you created, and how you created it. For this project, you're required to include a README.md file. These are written in and give an overview of the project. You might like to include sections which follow the three headings above: planning; building; and debugging.

hashtag
Build something you find interesting

The above examples give you a sense of the kind of feature we’re looking for. It’s up to you to build something that you find challenging, and engaging.

We’re looking for creative features that you have built yourself. Is there something you’ve always wanted to see on a website? A type of game you enjoy? Something that would add additional functionality to your site? And most importantly, find something you enjoy building!

wireframesarrow-up-right
Rubber Duckingarrow-up-right
Markdownarrow-up-right

learning-outcomes

project

Your project is to build a website showcasing your application. Your website should:

  • Tell us about you

  • Talk about why you'd like to move into a career as a web developer

  • Showcase what you've learnt so far

We welcome creativity within your implementation, this is your opportunity to show off with a website about you!

hashtag
Requirements

Your website must meet the following criteria:

To demonstrate your learning your site must have at least one example of each of these:

Tells us about why you are applying for the programme
  • DOM updates in response to user interaction (e.g. showing/hiding an element, changing text or styles)

    website

    resources

    hashtag
    JavaScript

    • MDN: typeofarrow-up-right

    hashtag
    Code Quality

    freeCodeCamp: JavaScript Objectsarrow-up-right
    MDN: Object.values()arrow-up-right
    MDN: Object.keys()arrow-up-right
    W3: Document createElement()arrow-up-right
    JavaScript refactoringarrow-up-right
    MDN: Functions - reusable blocks of codearrow-up-right
    Career Karma: Guide to JavaScript Commentsarrow-up-right

    JavaScript

    MDN: Arrow functionsarrow-up-right
    MDN: Keydown eventarrow-up-right
    Chrome DevToolsarrow-up-right

    learning-outcomes

    hashtag
    Data types

    hashtag
    Objects

    hashtag
    DOM

    hashtag
    Code Quality

    hashtag
    Terminal/Command Line

    hashtag
    Git & GitHub

    Leave meaningful comments in your JavaScript code

    project

    Build a gallery which displays the projects you've been working on. You might include this in your application websitearrow-up-right to showcase what you've learnt and created while completing our requirements.

    Like your last project, please push your changes to GitHub and host your site live using GitHub Pages.

    hashtag
    Requirements

    flexboxarrow-up-right