What Is a SPA? | LearnWebCode

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Brad's Web Developer Bootcamp

Introduction

Your New Career Path (4:09)
What Is A Developer? (12:16)
How / Where Do We Write Code? (16:42)

Top Section Of Homepage

Let's Start Coding The Homepage (16:35)
Layout Spacing Basics (17:03)
Finding Your Joy (3:45)
VS Code Settings & Google Fonts (17:07)
Figma Tips (Dev Mode Explanation) (6:04)
CSS Box Model (17:01)
CSS Grid (Multiple Columns) (13:01)
SVG Icons (13:35)
SVG Figma Tip (1:12)
Background Splashes of Color (19:19)

Bottom "Pets" Section of Homepage

The Lost Art Of CSS (5:12)
Starting The Pets Area (13:37)
Creating The Pet Cards (15:18)
Finishing The Pet Card (14:04)
Mobile / Responsive Design (16:08)
Finishing Mobile Styles (16:06)
Tiny CSS Changes

Git: The Universal Skill

Why Do We Need Git? (3:24)
Installing Git (4:59)
Creating Our First Repository (13:54)
GitHub (19:01)
GitHub Pages (8:33)
Create Your Own Website / Portfolio / Blog (3:57)
Updating Our Repository (8:36)
Pulling In Co-Worker's Updates (16:38)
Feature Branches (9:19)

JavaScript

What Is JavaScript (19:19)
Functions & Objects (15:26)
Fetching Data (16:55)
Finishing Temperature Feature (12:25)
Programming Is An Emotional Challenge (3:47)

JavaScript For Pets Area

Fetching Dynamic Pet Data (14:21)
Dynamic Pet Cards (12:52)
Pet Description + Age (12:58)
Pet Fallback Image (4:44)
Species Filter Active Button (11:25)
Actually Filtering The Pet Cards (17:07)

Dynamic Data-Driven Projects

How Do We Create Dynamic Websites? (11:38)
Creating Our Database (10:30)
Netlify (16:45)
Node.js (16:59)
Connect To MongoDB Within Node (14:23)
Actually Leveraging Our Data URL (12:22)

Letting Logged In Users Manage Pets

Let's Use Netlify For Everything (8:57)
What Is A Cookie? (16:13)
Login Attempt (19:05)
Setting Cookie & Logging Out (16:00)
Styling Admin Area (9:58)
Loading Pets In Admin Area (15:17)
Improving The User Experience (14:24)

Adding, Editing & Deleting Pets

Add New Pet Form (14:28)
Receiving New Pet Data On Server (14:59)
Saving New Pet Into Database (17:46)
What Does "Escaping" Text Mean? (8:53)
Quick VS Code Tip About MongoDB
Edit Existing Pet Form (14:08)
Save Changes To Existing Pet (14:33)
MongoDB Security Tip
Animate Form While Loading (11:44)
Delete Pet (11:40)
Pushing Up Live To Netlify (6:17)

User Uploaded Photos

Where Do We Store User Uploaded Photos? (9:29)
Creating A Signature That Cloudinary Can Trust (11:50)
Uploading Photo To Cloudinary (21:11)
Saving Photo ID To Our Database (17:07)
Edit Existing Pet's Photo (14:37)
Going Live With Our Photo Feature (6:34)

Express.js & Contact Form

Cloning Express.js Project (14:56)
Quick Note About Sessions & User Registration
HTML & CSS For Overlay (14:49)
Matching Design of Overlay (15:37)
Opening & Closing The Overlay (15:07)
Show Relevant Pet In Overlay (15:37)
Sending Data To Our Backend (12:51)
Validating Data On Our Backend (13:54)
Programmatically Sending Emails (16:37)
Thank You & Automatically Closing Overlay (13:57)
Attention To Detail (16:12)
Saving Contacts To Database (15:00)
Outputting List of Contacts For A Pet (16:15)
Going Live With Our Express Server (15:02)

Chat Room (React & Next.js)

What Is a SPA? (12:11)
What Is React? (2:40)
What Is Next.js? (12:06)
Actually Starting Chat Feature (11:09)
Styling Chat Feature (CSS) (12:59)
Design For Chat Bubbles (10:32)
Open and Close Chat UI (18:37)
Unread Message Badge (9:05)
What Is Pusher? (19:56)
Chat Bubble Log (18:19)
Chat UX Details (14:04)
Hosting (Deploying) Our Next.js App (12:45)

WordPress Task

Getting Started With Our New Project (14:53)
Adding Our Theme (14:46)
Tailwind Needs "npm start"
Single (Individual) Post Template (7:06)
Styling Our Template (14:54)
Finishing Our Styling (16:34)
Pull From The WordPress Database (6:33)
Starting The Search Feature (6:23)
Search Overlay (18:39)
Styling The Results (11:59)
Opening & Closing Overlay (13:50)
Timers In JavaScript (14:59)
Looping Through Results Data (9:45)

Moving Forward

How To Move Forward (6:58)

Teach online with

What Is a SPA?

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock