The Full Stack Web Developer Academy For Beginners

Welcome and let’s get started!
1 Welcome to the course!
2 What you will need for this course
3 Understanding HTML

Beginning HTML
4 Setting up a web project
5 Structuring a web page
6 HTML Headings
7 Div and span
8 Adding paragraphs and text
9 Text emphasis, importance and formatting
10 HTML Lists
11 Time to practice – Create the project lists
12 Working with images
13 Links
14 Time to practice – Linking to pages
15 What are semantic elements
16 Adding semantic elements into our project
17 Time to practice – Adding more products
18 Solution – Adding more products
19 HTML Comments
20 HTML entities and symbols
21 Time to practice – Product detail page

Forms, Tables & iFrames
22 HTML Tables
23 HTML Forms
24 Form labels, name and id
25 Checkboxes and radio buttons
26 Select input
27 Datalist & submit
28 Other useful form elements
29 Iframes
30 Adding Google maps

Beginning CSS
31 Understanding CSS
32 Inline styles and adding color
33 Internal stylesheets
34 Exterrnal stylesheets
35 Fonts
36 Classes and id’s
37 Margin and padding
38 Block, inline and inline block
39 The box models
40 List styling
41 Styling links and psuedo classes
42 Float and clear
43 The position property
44 Styling forms and inputs
45 Time to practice-final project styling
46 Solution – final project styling
47 Specificity and the cascade

Responsive Design
48 What is responsive design
49 The viewport meta tag
50 Scalable units
51 Fluid layout
52 Understanding media queries
53 Mobile first styling
54 Styling for medium devices
55 Styling for large devices
56 Picture and srcset
57 Time to practice – Add responsiveness to project

CSS – Flexbox & Grid
58 What is Flexbox
59 Flex direction
60 Flex wrap and justify content
61 Align items
62 Align content
63 Controlling child items- order
64 Controlling child items – grow and shrink
65 Controlling child items – alignment
66 Time to practice – Integrate Flexbox into Tech Store
67 What is the CSS Grid
68 First look at the grid
69 Grid gaps
70 Track repeating and the for unit
71 Min and max track sizes
72 Grid line numbers
73 Grid line names
74 Grid template areas
75 Nesting grids
76 Alignment
77 Time to practice – Song Finder layout

Bootstrap 4
78 What is Bootstrap
79 What we will be building
80 Creating a Bootstrap project
81 The Bootstrap grid
82 Adding images and text
83 Bootstrap navbars
84 Bootstrap carousels
85 Adding controls to the carousel
86 Bootstrap modals
87 Bootstrap forms
88 Bootstrap utilities

Javascript – Basics and Control Flow
89 Variables, strings and numbers
90 Javascript arithmetic and operators
91 Alert, prompt and confirm
92 If else statements and comparison
93 Nesting if else statements
94 Else if and logical operators
95 The ternary operator
96 The switch statements
97 Time to practice – The dragon slayer game

Javascript – DOM Manipulation, functions and events
98 DOM Manipulation
99 Adding and removing elements with Javascript
100 Time to practice adding elements with Javascript
101 Javascript functions
102 Function arguments
103 Scope and hoisting
104 Arrow functions
105 Javascript events
106 The event objects
107 External Javascript
108 Time to practice pixel to em converter
109 Solution – pixel to em converter

Javascript – Loops, Arrays and objects
110 Javascript arrays
111 Array methods
112 Looping through arrays – forEach
113 Looping through arrays – map
114 Time to practice – Arrays
115 Solution- Arrays
116 For loop
117 While loop
118 Objects
119 Looping through objects
120 Object constructor function

Javascript – Shape Matcher Game and RegEx
121 Const and let
122 Generating a random shape
123 Repeating with setInterval
124 Template literals
125 Comparing objects and scoring
126 Introduction to regular expressions
127 RegEx find and replace project

API’S, fetching data and promises
128 HTTP, request and response
129 What is an API
130 Fetching data and query strings
131 Async code and promises
132 Map through results
133 Creating our search query
134 Improving our search
135 Audio previews, capture and bubbling

Setting up Node and Express
136 What we will be building
137 What is Node & NPM
138 Static v dynamic web server
139 Express.js and express generator
140 Express project structure
141 Using Nodemon
142 Serving static files

Routing and templating
143 Introduction to Pug
144 Template inheritance
145 Time to practice – Creating the header
146 Solution – Creating the header
147 Mixins
148 Basic routing
149 Route parameters
150 MVC Pattern
151 Using controllers
152 Using middleware

Mongo and Mongoose
153 Important Update – mLab now part of Mongo
154 Getting started with Mongo
155 Mongoose models
156 Creating our hotel upload form
157 Pushing to the database
158 Querying the database
159 Distinct values
160 The aggregation pipelines
161 The edit and remove form
162 Updating records
163 Deleting records

Styling and pushing on with our app
164 Hotel detail view
165 Locals and conditional rendering
166 Hotels by country
167 Styling the header- small screen
168 Styling the content- small screen
169 Large screen styling
170 Countries mixin
171 Promise.all and array destructuring
172 Environment variables
173 Handling file uploads
174 Saving images to the cloud
175 Retrieving images form the cloud
176 Hotel search form part 1
177 Hotel search form part 2
178 Search results template
179 Hotel detail search from

User Accounts and Authentication
180 Creating the user model
181 Sign up form
182 Validating user input and Passing errors to the template and sanitizing
183 Registering new users
184 Password encryption
185 Logging in
186 Logging out
187 Working with sessions
188 Providing user feedback with flash messages
189 User conditional rendering

Making bookings and the user dashboard
190 The order model
191 Booking confirmation page
192 Placing orders
193 User account area
194 Displaying all orders
195 Final CSS

Publishing to a live server
196 Preparing for production
197 Pushing our app to Heroku

Thank You
198 Thank you and congratulations!