Full Stack Web Development

Front End Web Development

What will be in Course

Download Course Syllabus

Download the 12 Rules to Learn to Code eBook [Latest Edition]

Download the Required Software

How Internet Works.

How Websites work

How to Get the Most Out of the Course

How to Get Help When You're Stuck

Pathfinder

Introduction to HTML

What is HTML

How to Download the Course Resources

HTML Heading Elements

HTML Paragraph Elements

Self Closing Tags

[Project] Movie Ranking

How to Ace this Course

Introduction to HTML

The List Element

Nesting and Indentation

Anchor Elements

Image Elements

Tip from Angela - Habit Building with the Calendar Trick

Get Access to the Monthly App Brewery Newsletter

Multi Page Website:

Computer File Paths

What are Webpages?

The HTML Boilerplate

[Project] Portfolio Website

How to Host Your Website for Free with GitHub

Introduction to Capstone Projects

Preview

Instructions for Capstone Project 1 - Online Resume

Introduction to CSS:

Why do we need CSS?

How to add CSS

CSS Quiz

CSS Selectors

[Project] Colour Vocab Website

Tip from Angela - Dealing with Distractions

Join the Student Community

CSS Properties

CSS Colours

Font Properties

Inspecting CSS

The CSS Box Model - Margin, Padding and Border

[Project] Motivational Poster Website

Intermediate CSS:

The Cascade – Specificity and Inheritance

Combining CSS Selectors

CSS Positioning

[Project] CSS Flag

Advanced CSS:

CSS Display

CSS Float

How to Create Responsive Websites

Preview

Media Queries

[Project] Web Design Agency Website

Tip from Angela - How to Deal with Procrastination

Flex Box:

Flex Direction

Flex Layout

Flex Sizing

[Project] Pricing Table

Tip from Angela - Building a Programming Habit

Grid:

Display: Grid

Grid Sizing

Grid Placement

[Project] Mondrian Painting

Bootstrap:

What is Bootstrap.

Display: Grid

Grid Sizing

Grid Placement

[Project] Mondrian Painting

Web Design School – Create a website that people love:

Understanding Colour Theory

Understanding Typography and How to Choose a Font

Manage ATTENTION with effective User Interface (UI) Design

User Experience (UX) Design

Web Design in Practice - Let's apply what we've learnt!

Introduction to Javascript ES6:

Introduction to Javascript

Javascript Alerts - Adding Behaviour to Websites

Data Types

Javascript Variables

javascript Variables Exercise Start

Javascript Variables Exercise

Javascript Variables Exercise Solution

Naming and Naming Conventions for Javascript Variables

Javascript Variable Naming Quiz

String Concatenation

String Lengths and Retrieving the Number of Characters

Challenge: Changing Casing in Text

Challenge: Changing String Casing Solution

Basic Arithmetic and the Modulo Operator in Javascript

Increment and Decrement Expressions

Javascript Numbers Quiz

Functions Part 1: Creating and Calling Functions

Functions Part 1 Challenge - The Karel Robot

The Karel Chess Board Solution

A Quick Note About the Next Lesson

Functions Part 2: Parameters and Arguments

Life in Weeks Coding Exercise

Life in Weeks Solution

Functions Part 3: Outputs & Return Values

Challenge: Create a BMI Calculator

BMI Calculator Challenge

Challenge: BMI Calculator Solution

JavaScript Functions Quiz

Tip from Angela - Set Your Expectations

Intermediate Javascript:

Random Number Generation in Javascript: Building a Love Calculator

Control Statements: Using If-Else Conditionals & Logic

Comparators and Equality

Combining Comparators

BMI Calculator Advanced (IF/ELSE)

Introducing the Leap Year Code Challenge

Leap Year Challenge Exercise

Leap Year Solution

Collections: Working with Javascript Arrays

Adding Elements and Intermediate Array Techniques

Who's Buying Lunch? Code Challenge

Who's Buying Lunch Solution

Control Statements: While Loops

Solution to the 99 Bottles Challenge

Control Statements: For Loops

Introducing the Fibonacci Code Challenge

The Fibonacci Exercise

Fibonacci Solution

Tip from Angela - Retrieval is How You Learn

The Document Objects Model

Adding Javascript to Websites

Introduction to the Document Object Model (DOM)

Solution to the DOM Challenge

Selecting HTML Elements with Javascript

Manipulating and Changing Styles of HTML Elements with Javascript

The Separation of Concerns: Structure vs Style vs Behaviour

Text Manipulation and the Text Content Property

Manipulating HTML Element Attributes

Tip from Angela - The 20 Minute Method

Boss Level Challenge 1 – The Dicee Game:

Challenge: The Dicee Challenge

Dicee Challenge Step 0 - Download the Skeleton Project

Dicee Challenge Step 1 - Create an External Javascript File

Dicee Challenge Step 2 - Add Dice Images

Dicee Challenge Step 3 - Create a Random Number

Dicee Challenge Step 4 - Change the to a Random Dice

Dicee Challenge Step 5 - Change both Elements

Dicee Challenge Step 6 - Change the Title to Display a Winner

The Solution to the Dicee Challenge

Download the Completed Website

Tip from Angela - Learning Before you Eat

Advanced Javasctipt and DOM Manipulation:

Download the Starting Files

Adding Event Listeners to a Button

Higher Order Functions and Passing Functions as Arguments

Higher Order Function Challenge Solution

How to Play Sounds on a Website

How to Use Switch Statements in JavascriptA Deeper Understanding of Javascript Objects

Objects, their Methods and the Dot Notaton

A Quick Note About the Next Lesson

Using Keyboard Event Listeners to Check for Key Presses

Understanding Callbacks and How to Respond to Event

Adding Animation to Websites

Download the Completed Website

JQuery:

What is jQuery?

How to Incorporate jQuery into Websites

How Minification Works to Reduce File Size

Selecting Elements with jQuery

Manipulating Styles with jQuery

Manipulating Text with jQuery

Manipulating Attributes with jQuery

Adding Event Listeners with jQuery

Adding and Removing Elements with jQuery

Website Animations with jQuery

Boss Level Challenge 2 – The Simon Game

What You'll Make: The Simon Game

Play the Game

Step 0 - Download the Starting Files

Step 1 - Add Javascript and jQuery

Step 1 - Answer

Step 2 - Create A New Pattern

Step 2 - Answer

Step 3 - Show the Sequence to the User with Animations and Sounds

Step 3 - Answer

Step 4 - Check Which Button is Pressed

Step 4 - Answer

Step 5 - Add Sounds to Button Clicks

Step 5 - Answer

Step 6 - Add Animations to User Clicks

Step 6 - Answer

Step 7 - Start the Game

Step 7 - Answer

Step 8 - Check the User's Answer Against the Game Sequence8

Step 8 - Answer

Step 9 - Game Over

Step 9 - Answer

Step 10 - Restart the Game

Step 10 - Answer

Download the Completed Project Code

The Unix Command Line:

Install Git Bash on Windows

Understanding the Command Line. Long Live the Command Line!

Command Line Techniques and Directory Navigation

Creating, Opening, and Removing Files through the Command Line

Backend Web Development:

Backend Web Development Explained

Backend Tools and Technologies - Which one to learn?

Node.js

What is Node js

Install Node.js on Mac

Install Node.js on Windows

Using Node.js

How to Use the Native Node Modules

The NPM Package Manager and Installing External Node Modules

[Project] QR Code Generator

Express.js with Node.js

What is Express?

Creating Our First Server with Expres

HTTP Requests

Postman

Introduction to Middlewares

Custom Middlewares

Secrets Access Project

EJS

What is EJS?

EJS Tags

Passing Data to EJS Templates

EJS Partials and Layouts

Band Generator Project

Capstone Project – Create a Blog web application:

Instruction

Git, Github, and Version Control:

Introduction to Version Control and Git

Version Control Using Git and the Command Line

GitHub and Remote Repositories

Gitignore

Cloning

Branching and Merging

Optional Git Challenge

Forking and Pull Requests

Application Programming Interfaces:

Introduction to APIs

Structuring API Requests

What is JSON?

Making Server-Side API Requests with Axios

API Authentication

REST APIs

Secrets Project

Capstone Project – Use a Public API:

Instructions

Build Your own API:

Building your own APIs

Creating GET Routes

Creating POST, PUT, and PATCH Routes

Creating the DELETE Route

Build your own API for a Blog

Databases:

What is Data Base

SQL:

SQL Commands: CREATE Table and INSERT Data

SQL Commands: READ, SELECT, and WHERE

Updating Single Values and Adding Columns in SQL

SQL Commands: DELETE

Understanding SQL Relationships, Foreign Keys and Inner Joins

Postgre SQL:

Introduction to Postgres

How to Install PostgreSQL and pgAdmin

Understand how to use keys, Postgres types and keywords

Flag Emojis on Windows ?

Use pgAdmin to CREATE a TABLE

READ data from a Postgres database

Query data using SELECT, WHERE, and LIKE

UNIQUE and NOT NULL | Travel Tracker Part 1

INSERT and add Data | Travel Tracker Part 2

Travel Tracker Part 3

One to One Relationships & Inner Joins

One to Many Relationships

Many to Many Relationships & Aliases

The Family Travel Tracker

How to update and delete data & tables

Permalist Project

Authentication and Security – Handling Credentials and Designing a Secure Login:

Introduction to Authentication

Level 1 - Registering Users with Email and Password

Level 2 - Encryption and Hashing

How to Hack Passwords

Level 3 - How to Salt Passwords for Improved Encryption

Managing Cookies and Sessions

Level 5 - Hide your Secrets with Environment Variables

Set up your Google OAuth Credentials

Level 6 - OAuth: Implement "Sign In with Google"

Finish the app: let users submit secrets

React. Js:

What we will make in this React module

Introduction to Code Sandbox and the Structure of the Module

[Optional] Local Development Setup

Introduction to JSX and Babel

JSX Code Practice

Javascript Expressions in JSX & ES6 Template Literals

Javascript Expressions in JSX Practice

JSX Attributes & Styling React Elements

Inline Styling for React Elements

React Styling Practice

React Components

React Components Practice

Javascript ES6 - Import, Export and Modules

Javascript ES6 Import, Export and Modules Practice

Keeper App Project - Part 1 Challenge

Keeper App Part 1 Solution

React Props

React Props Practice

React DevTools

Mapping Data to Components

Mapping Data to Components​ Practice

Javascript ES6 Map/Filter/Reduce

Javascript ES6 Arrow functions

Keeper App Project - Part 2

React Conditional Rendering with the Ternary Operator & AND Operator

Conditional Rendering Practice

State in React - Declarative vs. Imperative Programming

React Hooks - useState

useState Hook Practice

Javascript ES6 Object & Array Destructuring

Javascript ​ES6 Destructuring Challenge Solution

Event Handling in React

React Forms

Class Components vs. Functional Components

Changing Complex State

Changing Complex State Practice

Javascript ES6 Spread Operator

Javascript ES6 Spread Operator Practice

Managing a Component Tree

Managing a Component Tree Practice

Keeper App Project - Part 3

Note about the Next Lesson - Packages and Imports

React Dependencies & Styling the Keeper Apps

Web3 Decentralised App Development with the Internet Computer:

What is Web3?

How does the Blockchain actually work?

What are DApps (Decentralised Apps) and how do you develop them?

What is the Internet Computer (ICP)?

Read Me!

[Mac Users] Installation and Setup for Web3 Development

[Windows Users] Installation and Setup for Web3 Development

Build your first Defi Dapp – Dbank:

Introduction to the Motoko Language

Motoko Functions and the Candid User Interface

Motoko Conditionals and Type Annotations

Query vs. Update Methods

Orthogonal Persistance

Tracking Time and Calculating Compound Interest

Motoko Language Quiz

Adding HTML and CSS to Create the Frontend for DBANK

Connecting the Motoko Backend to our JS Frontend

Where to Get Help and Support for Development on the Internet Compute

Deploying Dapps on ICP with a React Frontend:

What are Cycles and the ICP Token?

How to Claim Free Cycles from Dfinity

How to Deploy to the ICP Network

How to Convert ICP into Cycles?

[Optional] How to Deploy a Static Website onto the ICP Blockchain for Hosting

How to Configure a DFX Created Project to Use React

Storing Data on a Canister

Retrieving Data from a Canister

Deleting and Persistance

Create your own crypto token:

Tokens and Coins: What are they and how are they used?

Download and Configure the Skeleton Project

Using Motoko Hashmaps to Store Token Balances

Showing the User's Token Balance on the Frontend

Creating the Faucet Functionality Using the Shared Keyword

Creating the Transfer Functionality

Using the Transfer Functionality in the Faucet

Persisting Non-Stable Types Using the Pre- and Postupgrade Methods

What is the Internet Identity?

Authenticating with the Internet Identity

Minting NFTs and building an NFT Marketplace like opensea:

Minting NFTs

Viewing the NFT on the Frontend

Enabling the Minting Functionality on the Frontend

Displaying Owned NFTs Using the React Router

Listing NFTs for Sale

Styling the Listed NFTs

Creating the "Discover" Page

Buying NFTs

Join the $6 Million Dollar Supernova Hackathon