What We'll Make - Stylised Personal Site | The App Brewery

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Legacy Complete Web Development Course

Section 1: Front End Web Development

What You'll Get in This Course (3:08)
Download the Course Syllabus
Download the Course Resources
How Does the Internet Actually Work? (5:42)
How Do Websites Actually Work? (6:20)
Download the Required Software
What You'll Need to Get Started - Setup Your Local Web Development Environment (4:38)
Setup Packages (2:58)
How to Get Help When You're Stuck (6:44)
Pathfinder

Section 2: Introduction to HTML

Introduction to HTML (10:51)
The Anatomy of an HTML Tag (10:55)
What we're building - HTML Personal Site (2:52)
What is The HTML Boilerplate (17:01)
How to Structure Text in HTML (11:00)
HTML Lists (5:24)
HTML Image Elements (7:32)
HTML Links and Anchor Tags (11:55)
How to Ace this Course (1:24)

Section 3: Intermediate HTML

HTML Tables (12:03)
Using HTML Tables for Layout (2:16)
HTML Tables Code Challenge (1:44)
HTML Tables Solution Walkthrough (6:44)
HTML Forms (9:17)
Forms in Practice - Create a Contact Me Form (7:29)
Publish Your Website! (6:48)
Tip from Angela - Habit Building with the Calendar Trick (2:52)
Get Monthly Tips and Tools to Level Up as a Developer

Section 4: Introduction to CSS

Introduction to CSS (3:04)
Inline CSS (9:56)
Internal CSS (20:22)
External CSS (8:29)
How to Debug CSS Code (13:37)
The Anatomy of CSS Syntax (13:08)
CSS Selectors (6:23)
Classes vs. Ids (11:44)
CSS Quiz
Tip from Angela - Dealing with Distractions (2:28)

Section 5: Intermediate CSS

What We'll Make - Stylised Personal Site (4:57)
What Are Favicons? (3:47)
HTML Divs (13:33)
The Box Model of Website Styling (19:25)
CSS Display Property (15:11)
Learn More About Web Design
CSS Static and Relative Positioning (14:36)
Absolute positioning (12:12)
The Dark Art of Centering Elements with CSS (9:03)
Font Styling in Our Personal Site (13:59)
Learn More About Typography
Adding Content to Our Website (6:52)
CSS Sizing (15:39)
Font Properties Challenge 1 - Change the Font Colour
Font Properties Challenge 2 - Change the Font Weight
Font Properties Challenge 3 - Change the Line Height
CSS Font Property Challenge Solutions (3:57)
CSS Float and Clear (15:13)
CSS Challenge
Stylised Personal Site Solution Walkthrough (21:22)
[Optional] Get More Practice with CSS and HTML
Tip from Angela - Nothing Easy is Worth Doing! (3:35)

Section 6: Introduction to Boostrap 4

What is Bootstrap? (14:36)
Installing Bootstrap (7:55)
Web Design 101 - Wireframing (11:38)
The Bootstrap Navigation Bar (20:40)
What We'll Make: TinDog (0:56)
Download the TinDog Starting Files
Setting Up Our New project (7:41)
Bootstrap Grid Layout System (20:17)
Adding Grid Layouts to Our Website (9:39)
Bootstrap Containers (5:54)
Bootstrap Buttons & Font Awesome (11:30)
Styling Our Website Challenges and Solutions (20:20)
Bootstrap Challenge 1
Solution to Bootstrap Challenge 1 (17:01)
Tip from Angela - How to Deal with Procrastination (4:07)

Section 7: Intermediate Bootstrap

The Bootstrap Carousel Part 1 (9:39)
The Bootstrap Carousel Part 2 (17:20)
Bootstrap Cards (16:31)
CSS Z-Index and Stacking Order (21:28)
Media Query Breakpoints (22:03)
Boostrap Challenge 2
Bootstrap Challenge 2 Solution (11:46)
How to become a Better Programmer - Code Refactoring (7:48)
Put it into Practice - Refactor our Website Part 1 (19:20)
Advanced CSS - Combining Selectors (11:43)
Refactoring our Website Part 2 (5:21)
Advanced CSS - Selector Priority (5:51)
Completing the Website (2:34)
Download the Complete Website
Tip from Angela - Building a Programming Habit (2:46)

Section 17: Backend Web Development

Backend Web Development Explained (8:02)

Section 18: Node.js

What is Node.js? (5:40)
Install Node on Mac
Install Node on Windows
The Power of the Command Line and How to Use Node (6:27)
The Node REPL (Read Evaluation Print Loops) (2:39)
How to Use the Native Node Modules (8:19)
The NPM Package Manager and Installing External Node Modules (13:44)
Tip from Angela - Step Up to the Challenge (1:14)

Section 19: Express.js with Node.js

What is Express? (3:24)
Creating Our First Server with Express (11:29)
Handling Requests and Responses: the GET Request (8:12)
Understanding and Working with Routes (9:23)
What We'll Make: A Calculator (1:52)
Calculator Setup Challenge
Calculator Setup: Challenge Solution (5:43)
Responding to Requests with HTML Files (7:40)
Processing Post Requests with Body Parser (14:19)
BMI Routing Challenge
Solution to the BMI Routing Challenge (6:29)
Tip from Angela - How to Solidify Your Knowledge (2:55)

Section 20: APIs - Application Programming Interfaces

What are APIs? Application Programming Interfaces Demystified (29:33)
Using the Request Module to Get Data from an API (17:39)
Understanding the JSON Format and Working with JSON (22:20)
API Calls with Parameters (14:53)
What We'll Make: A MailChimp Newsletter Sign Up Page (2:41)
Setting Up the Newsletter Page (21:08)
Posting Data to MailChimp's Servers (26:45)
Adding Success and Failure Pages to the Website (10:20)
Deploy the Project to Heroku and Make it Live! (19:28)
Why Do We Need APIs? (8:50)
API Endpoints, Paths and Parameters. (10:59)
API Authentication and Postman (11:34)
What is JSON? (4:54)
Making GET Requests with the Node HTTPS Module (13:00)
How to Parse JSON (13:05)
Using Express to Render a Website with Live API Data (8:23)
Using Body Parser to Parse POST Requests to the Server (10:05)
The Mailchimp API - What You'll Make (2:41)
Setting Up the Sign Up Page (20:52)
Posting Data to Mailchimp's Servers via their API (18:37)
Adding Success and Failure Pages (8:55)
Deploying Your Server with Heroku (18:38)
Tip from Angela - Location, Location, Location! (2:06)

Section 21: Git, Github and Version Control

Introduction to Version Control and Git (2:35)
Version Control Using Git and the Command Line (15:02)
GitHub and Remote Repositories (11:00)
Gitignore (12:02)
Cloning (5:05)
Branching and Merging (17:25)
Optional Git Challenge
Forking and Pull Requests (17:08)
Tip from Angela - Spaced Repetition (4:01)

Section 22: EJS

What We'll Make: A ToDoList (0:46)
Linter Errors with EJS
Templates? Why Do We Need Templates? (15:10)
Creating Your First EJS Templates (17:53)
Running Code Inside the EJS Template (6:33)
Passing Data from Your Webpage to Your Server (25:05)
The Concept of Scope in the Context of Javascript (8:40)
Adding Pre-Made CSS Stylesheets to Your Website (16:14)
Understanding Templating vs. Layouts (13:35)
Understanding Node Module Exports: How to Pass Functions and Data between Files (21:45)
Tip from Angela - Use Accountability in your Favour (2:56)

Section 23: Boss Level Challenge 3 - Blog Website

A New Challenge Format and What We'll Make: A Blog (6:18)
Setting Up the Blog Project (7:06)
Challenge 1 (4:04)
Challenge 1 Solution (2:37)
Challenge 2 (4:07)
Challenge 2 Solution (2:09)
Challenge 3 (2:37)
Challenge 3 Solution (2:31)
Challenge 4 (2:05)
Challenge 4 Solution (1:52)
Challenge 5 (2:47)
Challenge 5 Solution (4:16)
Challenge 6 (1:24)
Challenge 6 Solution (1:15)
Challenge 7 (0:59)
Challenge 7 Solution (1:54)
Challenge 8 (3:26)
Challenge 8 Solution (3:36)
Challenge 9 (4:42)
Challenge 9 Solution (6:33)
Challenge 10 (2:24)
Challenge 10 Solution (3:13)
Challenge 11 (3:21)
Challenge 11 Solution (3:00)
Challenge 12 (1:55)
Challenge 12 Solution (2:34)
Challenge 13 (2:46)
Challenge 13 Solution (3:37)
Challenge 14 and Solution (6:28)
Challenge 15 (1:41)
Challenge 15 Solution (3:14)
Express Routing Parameters (6:38)
Challenge 16 (1:55)
Challenge 16 Solution (2:32)
Challenge 17 (3:54)
Challenge 17 Solution (5:30)
Challenge 18 (6:04)
Challenge 18 Solution (4:19)
Challenge 19 (2:57)
Challenge 19 Solution (4:54)
Challenge 20 (2:58)
Challenge 20 Solution (3:18)
Challenge 21 (2:15)
Challenge 21 Solution (3:44)
Tip from Angela - When Life Gives You Lemons (6:01)

Section 24: Databases

Databases Explained: SQL vs. NOSQL (19:58)

Section 26: MongoDB

Installing MongoDB on Mac (12:34)
Installing MongoDB on Windows (9:20)
MongoDB CRUD Operations in the Shell: Create (9:37)
MongoDB CRUD Operations in the Shell: Reading & Queries (6:22)
MongoDB CRUD Operations in the Shell: Update (4:07)
MongoDB CRUD Operations in the Shell: Delete (1:45)
Relationships in MongoDB (6:12)
Working with The Native MongoDB Driver (19:03)
If You Have Forgotten to Quit the Mongod Server
Tip from Angela - Daily Routines (2:34)

Section 27: Mongoose

Introduction to Mongoose (20:26)
Reading from Your Database with Mongoose (7:28)
Data Validation with Moongoose (7:55)
Updating and Deleting Data Using Mongoose (10:06)
Establishing Relationships and Embedding Documents Using Mongoose (6:45)
Tip from Angela - Deep Work (3:01)

Section 28: Putting Everything Together

Let's take the ToDoList Project to the Next Level and Connect it with Mongoose (16:46)
Rendering Database Items in the ToDoList App (13:25)
Adding New Items to our ToDoList Database (3:56)
Deleting Items from our ToDoList Database (13:48)
Creating Custom Lists using Express Route Parameters (16:12)
Adding New Items to the Custom ToDo Lists (7:31)
Revisiting Lodash and Deleting Items from Custom ToDo Lists (19:10)
Tip from Angela - One Step at a Time (2:54)

Section 29: Deploying Your Web Application

How to Deploy Web Apps with a Database (5:02)
How to Setup MongoDB Atlas (13:41)
Deploying an App with a Database to Heroku (12:13)
Tip from Angela - Discipline Breeds Discipline (2:20)

Section 30: Boss Level Challenge 4 - Blog Website Upgrade

Challenge: Give your Blog a Database (2:31)
Step 0 - Download the Starting Files
Step 1 - Save Composed Posts with MongoDB
Step 2 - Get the Home Page to Render the Posts
Fix the bug
Step 4 - Render the correct blog post based on post _id
Completed Blog with Database Solution
Tip from Angela - Dealing with Limitations (5:22)

Section 31: Build Your Own RESTful API

REST Explained (17:08)
Creating a Database with Robo 3T (9:29)
Set Up Server Challenge (2:09)
Set up Server Solution (7:30)
GET All Articles (6:50)
POST a New Article (12:51)
DELETE All Articles (5:11)
Chained Route Handlers Using Express (7:07)
GET a Specific Article (14:02)
PUT a Specific Article (10:32)
PATCH a Specific Article (7:17)
DELETE a Specific Article (4:04)
Download the Completed Project
Tip from Angela - How to Get a Job as Programmer (2:06)

Section 32: Authentication and Security

Introduction to Authentication (5:46)
Getting Set Up (7:26)
New Lecture
Level 1 - Authentication with Username and Password (14:42)
Level 2 - Database Encryption (16:35)
Security and Environment Variables (17:40)
Level 3 - Hashing Passwords (15:25)
Hacking 101 (12:28)
Level 4 - Hashing and Salting with bcrypt (20:41)
Cookies and Sessions (8:19)
Level 5 - Passport.js Local & Sessions (29:30)
Level 6 - OAuth 2.0 and Social Login with Google (47:46)
Finishing the App - Allowing Users to Submit Secrets (13:40)
How to Review the Source Code for Each Lesson
Tip from Angela - How to Work as a Freelancer (1:37)

What We'll Make - Stylised Personal Site

Complete and Continue

Discussion

0 comments