Learn HTML, CSS, Responsive Design, Flexbox & Grid, Bootstrap, Javascript, API'S, Node, Express, Mongo and so much more!
About This Video
In Detail
If you are an aspiring web developer or have a little …
Learn HTML, CSS, Responsive Design, Flexbox & Grid, Bootstrap, Javascript, API'S, Node, Express, Mongo and so much more!
About This Video
In Detail
If you are an aspiring web developer or have a little experience, then this is the only course you will need!
This course has been designed to give you a structured learning journey, teaching all the skills you need to build full-stack web applications!
We begin with a little background into HTML, what it is, and how it came about.
Then we take a deep dive into learning about how to use HTML, learning things such as Setting up an HTML project, HTML Structure, Headings, Div and span elements, Adding text and links, Formatting text, Lists, Images, Semantic elements and so on and will move onto styling with CSS. We then take the project even further by learning all about responsive design to make your websites look great on all size devices. Then onto the CSS Flexbox and CSS Grid. After this, we learn about the responsive Bootstrap 4 framework. The next sections will be teaching you all about Javascript, API'S and fetching data and a lot more.
We round things off by building a full-stack application called 'Let's travel!'. This is a big project, which is a fun, yet challenging hotel booking project.
Chapter 1 : Welcome and let’s get started!
Welcome to the course! 00:03:40
What you will need for this course 00:01:17
Understanding HTML 00:06:29
Chapter 2 : Beginning HTML
Setting up a web project 00:03:09
Structuring a web page 00:05:56
HTML Headings 00:06:52
Div and span 00:05:23
Adding paragraphs and text 00:03:31
Text emphasis, importance and formatting 00:06:26
HTML Lists 00:04:52
Time to practice: Create the project lists 00:05:58
Working with images 00:05:53
Links 00:10:20
Time to practice: Linking to pages 00:03:40
What are semantic elements? 00:04:21
Adding semantic elements into our project 00:05:25
Time to practice: Adding more products 00:01:29
Solution: Adding more products 00:05:12
HTML Comments 00:03:53
HTML entities and symbols 00:06:01
Time to practice: Product detail page 00:03:23
Chapter 3 : Forms, Tables & iFrames
HTML Tables 00:09:53
HTML Forms 00:07:56
Form labels, name and id 00:05:02
Checkboxes and radio buttons 00:09:03
Select input 00:07:09
Datalist & submit 00:10:41
Other useful form elements 00:07:31
Iframes 00:06:26
Adding Google maps 00:06:26
Chapter 4 : Beginning CSS
Understanding CSS 00:02:38
Inline styles and adding color 00:06:25
Internal stylesheets 00:05:13
Exterrnal stylesheets 00:04:08
Fonts 00:06:54
Classes and id’s 00:05:36
Margin and padding 00:06:26
Block, inline and inline block 00:09:17
The box models 00:05:22
List styling 00:05:01
Styling links and psuedo classes 00:08:09
Float and clear 00:12:36
The position property 00:07:20
Styling forms and inputs 00:05:12
Time to practice-final project styling 00:01:20
Solution: final project styling 00:06:11
Specificity and the cascade 00:11:16
Chapter 5 : Responsive Design
What is responsive design? 00:03:26
The viewport meta tag 00:04:42
Scalable units 00:07:47
Fluid layout 00:04:43
Understanding media queries 00:08:51
Mobile first styling 00:05:03
Styling for medium devices 00:04:27
Styling for large devices 00:06:48
Picture and srcset 00:07:24
Time to practice: Add responsiveness to project 00:01:02
Chapter 6 : CSS: Flexbox & Grid
What is Flexbox? 00:03:27
Flex direction 00:04:42
Flex wrap and justify content 00:05:16
Align items 00:05:22
Align content 00:04:26
Controlling child items- order 00:02:58
Controlling child items: grow and shrink 00:06:16
Controlling child items: alignment 00:02:38
Time to practice: Integrate Flexbox into Tech Store 00:01:02
What is the CSS Grid? 00:00:56
First look at the grid 00:07:16
Grid gaps 00:02:28
Track repeating and the for unit 00:03:43
Min and max track sizes 00:02:07
Grid line numbers 00:07:07
Grid line names 00:05:53
Grid template areas 00:07:11
Nesting grids 00:02:33
Alignment 00:05:47
Time to practice: Song Finder layout 00:06:55
Chapter 7 : Bootstrap 4
What is Bootstrap? 00:03:33
What we will be building 00:02:30
Creating a Bootstrap project 00:07:02
The Bootstrap grid 00:08:28
Adding images and text 00:11:35
Bootstrap navbars 00:09:54
Bootstrap carousels 00:06:33
Adding controls to the carousel 00:04:35
Bootstrap modals 00:08:33
Bootstrap forms 00:13:53
Bootstrap utilities 00:12:12
Chapter 8 : Javascript: Basics and Control Flow
Variables, strings and numbers 00:09:32
Javascript arithmetic and operators 00:07:53
Alert, prompt and confirm 00:09:29
If/else statements and comparison 00:08:48
Nesting if else statements 00:03:44
Else if and logical operators 00:05:06
The ternary operator 00:05:10
The switch statements 00:05:28
Time to practice: The dragon slayer game 00:10:59
Chapter 9 : Javascript: DOM Manipulation, functions and events
DOM Manipulation 00:16:11
Adding and removing elements with Javascript 00:11:20
Time to practice adding elements with Javascript 00:01:04
Javascript functions 00:04:44
Function arguments 00:04:46
Scope and hoisting 00:10:24
Arrow functions 00:03:37
Javascript events 00:10:09
The event objects 00:04:29
External Javascript 00:02:46
Time to practice pixel to em converter 00:01:38
Solution: pixel to em converter 00:07:21
Chapter 10 : Javascript: Loops, Arrays and objects
Javascript arrays 00:03:35
Array methods 00:07:30
Looping through arrays: forEach 00:07:04
Looping through arrays: map 00:03:32
Time to practice: Arrays 00:01:36
Solution- Arrays 00:03:24
For loop 00:10:24
While loop 00:04:14
Objects 00:08:23
Looping through objects 00:04:36
Object constructor function 00:09:19
Chapter 11 : Javascript: Shape Matcher Game and RegEx
Const and let 00:11:13
Generating a random shape 00:04:27
Repeating with setInterval 00:04:37
Template literals 00:08:32
Comparing objects and scoring 00:09:25
Introduction to regular expressions 00:09:53
RegEx find and replace project 00:09:25
Chapter 12 : API’S, fetching data and promises
HTTP, request and response 00:09:33
What is an API? 00:07:43
Fetching data and query strings 00:09:59
Async code and promises 00:08:34
Map through results 00:12:05
Creating our search query 00:06:37
Improving our search 00:04:49
Audio previews, capture and bubbling 00:08:38
Chapter 13 : Setting up Node and Express
What we will be building 00:05:42
What is Node & NPM? 00:03:50
Static v dynamic web server 00:04:05
Express.js and express generator 00:08:53
Express project structure 00:10:25
Using Nodemon 00:06:14
Serving static files 00:02:16
Chapter 14 : Routing and templating
Introduction to Pug 00:09:15
Template inheritance 00:03:10
Time to practice: Creating the header 00:01:03
Solution: Creating the header 00:12:10
Mixins 00:11:09
Basic routing 00:05:47
Route parameters 00:04:40
MVC Pattern 00:02:14
Using controllers 00:05:36
Using middleware 00:07:44
Chapter 15 : Mongo and Mongoose
Important Update: mLab now part of Mongo 00:05:32
Getting started with Mongo 00:11:25
Mongoose models 00:07:37
Creating our hotel upload form 00:16:15
Pushing to the database 00:11:38
Querying the database 00:16:55
Distinct values 00:14:39
The aggregation pipelines 00:14:24
The edit and remove form 00:18:04
Updating records 00:18:53
Deleting records 00:09:22
Chapter 16 : Styling and pushing on with our app
Hotel detail view 00:06:42
Locals and conditional rendering 00:13:44
Hotels by country 00:08:50
Styling the header- small screen 00:10:41
Styling the content- small screen 00:07:27
Large screen styling 00:13:39
Countries mixin 00:04:14
Promise.all and array destructuring 00:07:33
Environment variables 00:07:40
Handling file uploads 00:12:30
Saving images to the cloud 00:07:35
Retrieving images form the cloud 00:05:21
Hotel search form part 1 00:13:00
Hotel search form part 2 00:08:01
Search results template 00:13:56
Hotel detail search from 00:07:30
Chapter 17 : User Accounts and Authentication
Creating the user model 00:05:56
Sign up form 00:10:53
Validating user input and Passing errors to the template and sanitizing 00:23:12
Registering new users 00:13:19
Password encryption 00:06:17
Logging in 00:12:57
Logging out 00:03:39
Working with sessions 00:14:14
Providing user feedback with flash messages 00:16:23
User conditional rendering 00:09:54
Chapter 18 : Making bookings and the user dashboard
The order model 00:04:21
Booking confirmation page 00:16:54
Placing orders 00:09:34
User account area 00:15:08
Displaying all orders 00:06:59
Final CSS 00:08:18
Chapter 19 : Publishing to a live server
Preparing for production 00:09:27
Pushing our app to Heroku 00:16:32
Chapter 20 : Thank You
Thank you and congratulations! 00:01:48