Become a Web Developer: 2024 Bootcamp

Course Curriculum

Chapter 1: Introduction

Lecture 1: Your New Career Path

Lecture 2: What Is A Developer?

Lecture 3: How / Where Do We Write Code?

Chapter 2: Top Section Of Homepage

Lecture 1: Let's Start Coding The Homepage

Lecture 2: Layout Spacing Basics

Lecture 3: Finding Your Joy

Lecture 4: VS Code Settings & Google Fonts

Lecture 5: Figma Tips (Dev Mode Explanation)

Lecture 6: CSS Box Model

Lecture 7: CSS Grid (Multiple Columns)

Lecture 8: SVG Icons

Lecture 9: SVG Figma Tip

Lecture 10: Background Splashes Of Color

Chapter 3: Bottom "Pets" Section of Homepage

Lecture 1: The Lost Art Of CSS

Lecture 2: Starting The Pets Area

Lecture 3: Creating The Pet Cards

Lecture 4: Finishing The Pet Card

Lecture 5: Mobile / Responsive Design

Lecture 6: Finishing Mobile Styles

Lecture 7: Tiny CSS Changes

Chapter 4: Git: The Universal Skill

Lecture 1: Why Do We Need Git?

Lecture 2: Installing Git

Lecture 3: Creating Our First Repository

Lecture 4: GitHub

Lecture 5: GitHub Pages

Lecture 6: Create Your Own Website / Portfolio / Blog

Lecture 7: Updating Our Repository

Lecture 8: Pulling In Co-Worker's Updates

Lecture 9: What Does ":wq" Mean?

Lecture 10: Feature Branches

Chapter 5: JavaScript

Lecture 1: What Is JavaScript

Lecture 2: Functions & Objects

Lecture 3: Fetching Data

Lecture 4: Finishing Temperature Feature

Lecture 5: Programming Is An Emotional Challenge

Chapter 6: JavaScript For Pets Area

Lecture 1: Fetching Dynamic Pet Data

Lecture 2: Dynamic Pet Cards

Lecture 3: Pet Description & Age

Lecture 4: Pet Fallback Image

Lecture 5: Species Filter Active Button

Lecture 6: Actually Filtering The Pet Cards

Chapter 7: Dynamic Data-Driven Projects

Lecture 1: How Do We Create Dynamic Websites?

Lecture 2: Creating Our Database

Lecture 3: Netlify

Lecture 4: Node.js

Lecture 5: Connect To MongoDB Within Node

Lecture 6: Actually Leveraging Our Data URL

Chapter 8: Letting Logged In Users Manage Pets

Lecture 1: Let's Use Netlify For Everything

Lecture 2: What Is A Cookie?

Lecture 3: Login Attempt

Lecture 4: Setting Cookie & Logging Out

Lecture 5: Cookies MaxAge (Seconds Not Milliseconds)

Lecture 6: Styling Admin Area

Lecture 7: Loading Pets In Admin Area

Lecture 8: Improving The User Experience

Chapter 9: Adding, Editing & Deleting Pets

Lecture 1: Add New Pet Form

Lecture 2: Receiving New Pet Data On Server

Lecture 3: Saving New Pet Into Database

Lecture 4: What Does "Escaping" Text Mean?

Lecture 5: Quick VS Code Tip About MongoDB

Lecture 6: Edit Existing Pet Form

Lecture 7: Save Changes To Existing Pet

Lecture 8: MongoDB Security Tip

Lecture 9: Animate Form While Loading

Lecture 10: Delete Pet

Lecture 11: Pushing Up Live To Netlify

Chapter 10: User Uploaded Photos

Lecture 1: Where Do We Store User Uploaded Photos?

Lecture 2: Creating A Signature That Cloudinary Can Trust

Lecture 3: Uploading Photo To Cloudinary

Lecture 4: Saving Photo ID To Our Database

Lecture 5: Edit Existing Pet's Photo

Lecture 6: Going Live With Our Photo Feature

Chapter 11: Express.js & Contact Form

Lecture 1: Cloning Express.js Project

Lecture 2: Quick Note About Sessions & User Registration

Lecture 3: HTML & CSS For Overlay

Lecture 4: Matching Design of Overlay

Lecture 5: Opening & Closing The Overlay

Lecture 6: Show Relevant Pet In Overlay

Lecture 7: Sending Data To Our Backend

Lecture 8: Validating Data On Our Backend

Lecture 9: Programmatically Sending Emails

Lecture 10: Thank You & Automatically Closing Overlay

Lecture 11: Attention To Detail

Lecture 12: Saving Contacts To Database

Lecture 13: Outputting List Of Contacts For A Pet

Lecture 14: Going Live With Our Express Server

Chapter 12: Chat Room (React & Next.js)

Lecture 1: What Is a SPA?