Welcome and let's get started!
Beginning HTML
-
Structuring a web page (5:56)
-
HTML Headings (6:52)
-
Setting up a web project (3:09)
-
Div and span (5:23)
-
Adding paragraphs and text (3:31)
-
Text emphasis, importance and formatting (6:25)
-
HTML lists (4:52)
-
Time to practice: Create the project lists (5:58)
-
Working with images (5:52)
-
Links (10:20)
-
Time to practice: Linking to pages (3:40)
-
What are semantic elements (4:21)
-
Adding semantic elements to our project (5:25)
-
Time to practice: Adding more products (1:28)
-
Solution: Adding more products (5:11)
-
HTML comments (3:52)
-
HTML entities and symbols (6:01)
-
Time to practice: Product detail page (3:22)
Forms, Tables & iFrames
Beginning CSS
-
Understanding CSS (2:37)
-
Inline styles and adding color (6:25)
-
Internal stylesheets (5:12)
-
External stylesheets (4:08)
-
Fonts (6:53)
-
Classes and id's (5:35)
-
Margin and padding (6:26)
-
Block, inline and inline-block (9:17)
-
The box model (5:21)
-
List styling (5:00)
-
Styling links and psuedo classes (8:09)
-
Float and clear (12:36)
-
The position property (7:20)
-
Styling forms and inputs (5:12)
-
Time to practice: final project styling (1:19)
-
Solution: final project styling (6:10)
-
Specificity and the cascade (11:16)
Responsive Design
-
What is responsive design? (3:25)
-
The viewport meta tag (4:42)
-
Scalable units (7:47)
-
Fluid layout (4:43)
-
Understanding media queries (8:51)
-
Mobile first styling (5:03)
-
Styling for medium devices (4:26)
-
Styling for large devices (6:47)
-
Picture and srcset (7:23)
-
Time to practice: Add responsiveness to project (1:01)
-
Tech-Store completed project download
CSS: Flexbox & Grid
-
What is the flexbox? (3:26)
-
Flex-direction (4:42)
-
Flex wrap and justify content (5:16)
-
Align items (5:21)
-
Align content (4:26)
-
Controlling child items- order (2:57)
-
Controlling child items: grow and shrink (6:15)
-
Controlling child items: alignment (2:37)
-
Time to practice: Integrate Flexbox into the Tech Store (1:01)
-
What is the CSS Grid? (0:56)
-
First look at the CSS Grid (7:16)
-
New Lecture
-
Grid gaps (2:28)
-
Track repeating and the fr unit (3:42)
-
Min and max track sizes (2:06)
-
Grid line numbers (7:06)
-
Grid line names (5:53)
-
Grid template areas (7:11)
-
Nesting grids (2:32)
-
Alignment (5:47)
-
Time to practice: Song Finder layout (6:55)
-
Song Finder project download (up to this section)
Bootstrap 4
-
What is Bootstrap? (3:32)
-
What we will be building (2:29)
-
Creating a Bootstrap project (7:01)
-
The Bootstrap grid (8:27)
-
Adding images and text (11:35)
-
Bootstrap navbars (9:54)
-
Bootstrap carousels (6:33)
-
Adding controls to the carousel (4:34)
-
Bootstrap modals (8:32)
-
Bootstrap forms (13:52)
-
Bootsrap utilities (12:12)
-
Gourmet Burgers completed project download
Javascript: Basics and Control Flow
-
Download Javascript starter files
-
Variables, strings and numbers (9:32)
-
Javascript arithmetic and operators (7:52)
-
Alert, prompt and confirm (9:28)
-
If/else statements and comparison (8:48)
-
Nesting if else statements (3:44)
-
Else if and logical operators (5:06)
-
The ternary operator (5:09)
-
The switch statement (5:27)
-
Time to practice-the dragon slayer game (10:59)
Javascript: DOM Manipulation, functions and events
-
DOM Manipulation (16:11)
-
Adding and removing elements with Javascript (11:19)
-
Time to practice: adding elements with Javascript (1:03)
-
Javascript functions (4:44)
-
Function arguments (4:46)
-
Scope and hoisting (10:23)
-
Arrow functions (3:37)
-
Javascript events (10:09)
-
The event object (4:28)
-
External Javascript (2:45)
-
Time to practice: pixel to em converter (1:37)
-
Solution: pixel to em converter (7:20)
Javascript: Loops, Arrays and objects
Javascript: Shape Matcher Game and RegEx
API'S, fetching data and promises
-
HTTP, request and response (9:32)
-
What is an API? (7:43)
-
Fetching data and query strings (9:59)
-
Async code and promises (8:33)
-
Map through results (12:04)
-
Creating our search query (6:37)
-
Improving our search (4:49)
-
Audio previews, capture and bubbling (8:38)
-
Javascript completed starter files download (all sections)
Setting up Node and Express
Routing and templating
Mongo and Mongoose
-
Important Update: mLab now part of Mongo (5:31)
-
Getting started with Mongo (11:25)
-
Mongoose models (7:36)
-
Creating our hotel upload form (16:15)
-
Pushing to the database (11:40)
-
Querying the database (16:54)
-
Distinct values (14:38)
-
The aggregation pipeline (14:23)
-
The edit and remove form (18:03)
-
Updating records (18:52)
-
Deleting records (9:21)
Styling and pushing on with our app
-
Hotel detail view (6:42)
-
Locals and conditional rendering (13:43)
-
Hotels by country (8:50)
-
Styling the header- small screen (10:41)
-
Styling the content- small screen (7:26)
-
Large screen styling (13:38)
-
Countries mixin (4:13)
-
Promise.all and array destructuring (7:32)
-
Environment variables (7:39)
-
Handling file uploads (12:30)
-
Saving images to the cloud (7:34)
-
Retrieving images from the cloud (5:21)
-
Hotel search form part 1 (12:59)
-
Hotel search form part 2 (8:01)
-
Search results template (13:55)
-
Hotel detail search form (7:30)
User Accounts and Authentication
-
Creating the user model (5:55)
-
Sign up form (10:52)
-
Validating user input (17:20)
-
Passing errors to the template and sanitization (5:52)
-
Registering new users (13:19)
-
Password encryption (6:17)
-
Logging in (12:56)
-
Logging out (3:38)
-
Working with sessions (14:14)
-
Providing user feedback with flash messages (16:23)
-
User conditional rendering (9:54)
Making bookings and the user dashboard
Publishing to a live server
