JavaScript

• MDN: typeof

• freeCodeCamp: JavaScript Objects

• MDN: Object.values()

• MDN: Object.keys()

Code Quality

• JavaScript refactoring

• MDN: Functions - reusable blocks of code

• Career Karma: Guide to JavaScript Comments

JavaScript

• W3: setInterval()

• W3: Function parameters

Documentation

• Make a README

• Awesome README

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.

Requirements

• The page has a title which informs the user what the site is about

• The page has a logical layout and clear structure

• There are images on the page, with alt-text where appropriate

• The page is visually interesting, for example with borders or colours

• A list is visible somewhere on the page

• A user can click on a link that takes them to another website

• The page has a header element, and a footer element

• Somewhere on the page, the user can see today's date. The date should always be correct. You'll need to use JavaScript to generate the date, and DOM manipulation to display it.

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 Markdown and give an overview of the project. You might like to include sections which follow the three headings above: planning; building; and debugging.

• Follow a logical approach to solving problems (e.g. writing pseudocode)

• Work through clear steps to resolve errors and debug code

• Write documentation of completed projects in the form of a README

• Refactor code and justify choices when refactoring

• Understand data types in JavaScript, such as numbers, strings, arrays and objects

• Make use of JavaScript methods and properties

• Make use of conditional statements in JavaScript

• Understand the purpose of HTML, CSS and JavaScript

• Understand DOM Manipulation and what it can be used for

• Write documentation of completed projects in the form of a README

• Upload code to GitHub and deploy a website to GitHub Pages

Getting started

• Setting up a web page

• MDN: Getting started with the web

• freeCodeCamp: Responsive web design

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.

HTML

• freeCodeCamp: Basic HTML and HTML5

• W3 Schools: HTML Tutorial

CSS

• freeCodeCamp: Basic CSS

• freeCodeCamp: Responsive Web Design Principles

• WebAIM: Alt Text

• CSS box model

JavaScript

• Oli's intro to the DOM

• MDN: Intro to DOM

• Date.toLocaleString()

Git

• Git

• Git intro videos

• Version control in VS Code

• GitHub's guide to set up 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.

GitHub

• Get started

• Create a repo

• Getting started with GitHub Pages

• GitHub Flow

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.

Examples

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.

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.

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.

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 wireframes.

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.

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.

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.

Rubber Ducking 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.

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 Markdown and give an overview of the project. You might like to include sections which follow the three headings above: planning; building; and debugging.

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!

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.

Requirements

• Store the object below in a JavaScript file in your codebase

• Render the data onto the webpage with DOM Manipulation

• Allow the user to affect the display of the data by interacting with the webpage

• Allow the user to update the data stored in the object by interacting with the webpage

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.

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"],
  },
};

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 Josh W Comeau's introduction.

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

• Follow a logical approach to solving problems (e.g. writing pseudocode)

• Work through clear steps to resolve errors and debug code

• Write documentation of a completed project in the form of a README

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!

Requirements

Your website must meet the following criteria:

• All code is written by you

• No external libraries (e.g. no Bootstrap, React or GitHub Pages themes, but external fonts/icons are fine)

• Tells us about who you are

• Tells us about why you are applying for the programme

• Shows your progress through the application projects (e.g. links to your deployed projects)

• Hosted on GitHub Pages

• Links back to the GitHub repository that contains the code for your site

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

• Semantic HTML5 elements

• CSS grid or flexbox layout (or both)

• DOM event listeners for user interaction (e.g. click, keydown)

• DOM updates in response to user interaction (e.g. showing/hiding an element, changing text or styles)

• Implement CSS Flexbox to create a responsive 1 Directional Layout

• Implement responses to user input in JavaScript using event listeners

• Understand the purpose and benefits of JavaScript functions

• Write JavaScript functions, using parameters to pass in specific data

Data types

• Check what type a value is in your code

• Convert from one type to another (e.g. object → array)

• Understand roughly what methods are available for strings, arrays and objects

Objects

• Use objects to keep track of values

• Know how to access values from within objects

• Know how to convert an object's keys to an array and iterate over them

DOM

• Create and update elements on the page based on values in a JavaScript object

• Use a loop to assign the same event listener to multiple elements

• Use function parameters to customise their behaviour

Code Quality

• Understand the need for refactoring

• Understand the value of writing reusable functions for repetitive tasks

• Separate repeated code into functions

• Leave meaningful comments in your JavaScript code

Terminal/Command Line

• Know how to use the terminal to navigate through a file system

• Know how to list the contents of a directory

• Know how to create a directory or file

Git & GitHub

• Initialise a Git repository from the terminal

• Use Git commands to stage, commit and push from the terminal

JavaScript

Code Quality

Build a gallery which displays the projects you've been working on. You might include this in your 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.

Requirements

• Have a section or card for each project

• Each card should have a title, an image of your project, and a description

• Use to arrange the cards on the page

• Resize cards based on screen width

• Adapt the layout of the gallery when the browser window resizes

• Display the cards in a single column on mobile devices

• Have a clickable button on each card that opens and closes the description text

HTML

CSS

JavaScript

Git

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.

Requirements

• Display fruits available for purchase

• Have a working add to basket button for each fruit

• Store the user's basket as a JavaScript object

• Have buttons to add one, remove one, and remove all instances of a fruit in the basket

• Increment or decrement the object values when fruits are added or removed

• Use reusable functions to complete repeated tasks

• Display the quantity of each fruit in the basket, when there is at least one of any fruit

• Display the basket as empty if all object values are zero

• Show a total number of fruits in the basket

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.