This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The Full Stack Web Developer Academy For Beginners
Welcome and let's get started!
Welcome to the course! (3:40)
Understanding HTML (6:29)
What you will need for this course (1:16)
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
HTML Tables (9:53)
HTML Forms (7:55)
Form labels, name and id (5:01)
Checkboxes and radio buttons (9:03)
Select input (7:08)
Datalist & submit (10:41)
Other useful form elements (7:30)
IFrames (6:25)
Adding Google maps (6:26)
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 arrays (3:35)
Array methods (7:30)
Looping through arrays: forEach (7:04)
Looping through arrays: map (3:31)
Time to practice: Arrays (1:36)
Solution- Arrays (3:23)
For loop (10:23)
While loop (4:13)
Objects (8:23)
Looping through objects (4:35)
Object constructor function (9:18)
Javascript: Shape Matcher Game and RegEx
Const and let (11:13)
Generating a random shape (4:27)
Repeating with setInterval (4:36)
Template literals (8:31)
Comparing objects and scoring (9:24)
Introduction to regular expressions (9:53)
RegEx find and replace project (9:25)
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
What we will be building (5:42)
What is Node & NPM? (3:50)
Static v dynamic web server (4:04)
Express.js and express generator (8:53)
Express project structure (10:25)
Using nodemon (6:13)
Serving static files (2:16)
Routing and templating
Introduction to pug (9:14)
Template inheritance (3:10)
Time to practice: Creating the header (1:02)
Solution: Creating the header (12:10)
Mixins (11:09)
Basic routing (5:46)
Route parameters (4:40)
MVC Pattern (2:14)
Using controllers (5:36)
Using middleware (7:43)
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
The order model (4:20)
Booking confirmation page (16:54)
Placing orders (9:33)
User account area (15:07)
Displaying all orders (6:59)
Final CSS (8:18)
Let's Travel completed project download
Publishing to a live server
Preparing for production (9:27)
Pushing our app to Heroku (16:32)
Thank You
Thank you and congratulations! (1:47)
Keep on learning
Solution: Creating the header
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now
course builder. Create your online course today.
Start now
