Learn HTML CSS JavaScript all in one place packed with exercises and source code with examples
About This Video
In Detail
This course is going to take you on a journey where you’ll learn and practice HTML CSS and JavaScript all in one course. This includes various topics in HTML such as how to write and practice …
Learn HTML CSS JavaScript all in one place packed with exercises and source code with examples
About This Video
In Detail
This course is going to take you on a journey where you’ll learn and practice HTML CSS and JavaScript all in one course. This includes various topics in HTML such as how to write and practice HTML, Heading Tags, Update template and lot more. You will be able to understand CSS, Advanced CSS, and Apply CSS in creating a website etc. This course is designed to help you learn and practice front-end coding for website development and design. Source Code and examples are included to get you started quickly. Links to top resources and more all available in one massive course. You will be able to create interactive websites from scratch and allows you to become familiar with coding and creating web pages and applications.
Chapter 1 : Introduction to web development course
Web development introduction 00:06:42
Welcome to front end web development 00:05:41
Chapter 2 : How the internet works
DNS Names and IP addresses 00:03:54
Code of the internet 00:03:44
HTML and CSS how they work 00:06:38
JavaScript Code 00:02:46
Web development and how it works 00:06:41
Dynamic Static Frontend Backend Client Side Server Side 00:08:33
Editors creating frontend code 00:03:54
Web development Browsers 00:05:00
File Structure 00:03:45
Hosting websites 00:03:19
Get your website files to your server 00:05:50
Web developer Resources and info 00:06:22
Chapter 3 : Basics of HTML
What is HTML 00:07:33
How to Write and Practice HTML 00:09:54
How to create an HTML boilerplate 00:10:50
Exercise creating a boilerplate HTML file 00:02:07
Self Closing tags Meta tags and attributes 00:06:26
Heading Tags 00:05:36
Update template 00:02:21
Common tags P BR HR separate text 00:08:14
Clean Code Comments and more 00:06:08
HTML preformatted text 00:02:42
HTML Character Codes resources 00:07:49
Exercise Recreate as HTML 00:05:22
Chapter 4 : HTML more tags
HTML Markup Examples 00:12:21
HTML hyperlinks 00:10:18
Hyperlink Attributes 00:05:16
How to create HTML bookmarks 00:05:38
email link HTML mailto 00:03:53
Exercise Create Navbar for website 00:04:19
Adding Images to websites 00:08:11
Exercise Create Thumbnail portfolio 00:05:55
Ordered Lists and Unordered lists 00:08:11
HTML Description List 00:02:55
HTML Nested Lists 00:03:15
Exercise List of services 00:02:58
HTML tables 00:07:26
HTML spanning multiple cells 00:04:08
Quick Tip Styling 00:03:29
Exercise HTML table 00:07:44
HTML forms introduction 00:06:04
Contact Form HTML 00:08:29
New HTML5 input types 00:05:47
Form elements HTML 00:06:22
Form content 00:04:43
Exercise Create Contact Form 00:11:04
HTML5 semantic elements 00:04:07
HTML iframe pages 00:05:00
Exercise Create a Website 00:07:48
Chapter 5 : Introduction to CSS
Websites with and without CSS 00:06:37
How to add CSS to HTML Pages 00:10:29
Making selections CSS inspector 00:07:42
Divs and spans content selection 00:06:32
CSS selection id tag class 00:08:44
Colors HEX RGB RGBA values 00:07:29
CSS named color values 00:02:28
CSS background images 00:09:17
CSS background shorthand statement 00:02:33
CSS borders shorthand 00:05:45
CSS border Outline 00:02:05
CSS Margins 00:04:08
CSS padding 00:03:10
CSS Box Model Dev Tools 00:07:40
CSS height and Width 00:03:45
Box Model Challenge 00:05:20
Auto Margins Center your elements CSS 00:02:03
CSS font property 00:05:38
CSS Text property 00:04:20
Chrome dev tools editors and options 00:02:48
Adding Font families Google Fonts 00:04:56
Line Height CSS 00:02:54
CSS letter spacing 00:02:36
CSS links 00:04:53
CSS table styling 00:05:56
Display and Hiding elements CSS 00:06:38
Display Inline 4 squares Challenge 00:05:32
CSS position Properties 00:06:15
DevTools Design Tips 00:03:03
Coding Challenge Make a NavBar from an unordered list 00:04:16
Code Challenge Solution 00:10:42
Chapter 6 : Using CSS to build webpage layouts
Floats section introduction 00:02:15
More about Floats 00:05:57
Intro to Floats 00:04:54
CSS Float images inline with text 00:06:17
CSS float thumbnails 00:05:26
HTML build basic page layout CSS 00:06:11
2 column CSS site 00:04:12
Create a 2 column page layout in minutes 00:06:20
Create 3 column webpage 00:07:08
3 column height background color fix 00:03:55
Chapter 7 : Advanced CSS
CSS Combinators 00:07:40
CSS Pseudo Classes 00:08:56
CSS Pseudo Elements 00:08:22
CSS Selectors by attributes 00:08:46
CSS Media Queries secret to responsive design 00:12:14
Chapter 8 : Do more with CSS
Multiple Background Images CSS 00:02:47
Element box properties CSS 00:07:07
More border options CSS3 00:08:08
background gradients CSS 00:06:07
CSS3 Animation 00:06:24
Chapter 9 : Apply CSS create a website
HTML build a basic website structure with HTML 00:06:26
Apply CSS build a navbar 00:05:18
Build 2 Column main content area CSS 00:06:42
Sidemenu links hover CSS 00:07:47
CSS website tweak 00:10:21
Chapter 10 : JavaScript do more on your web page
What is JavaScript 00:02:39
How to add JavaScript to Webpages 00:08:22
Debugging and commenting JavaScript 00:05:35
JavaScript Basic Data Types 00:03:54
JavaScript Variables 00:05:03
JavaScript Variable Rules 00:04:17
Exercise 1 Output to console link to js file 00:03:43
Data type Null vs Undefined JavaScript 00:05:09
Declaring multiple variables at once JavaScript 00:02:13
JavaScript Operators 00:09:10
Increment and Decrement Values JavaScript 00:04:01
Assignment Operators JavaScript 00:02:57
Comparison Operators JavaScript 00:05:39
JavaScript String Operators 00:02:21
JavaScript Logical Operators 00:07:05
Chapter 11 : JavaScript coding essentials
prompt and alert JavaScript 00:04:03
Writing content to the HTML document object 00:03:08
JavaScript Objects 00:05:45
JavaScript Objects Dynamic Outputs 00:04:45
JavaScript Objects within Objects 00:05:55
JavaScript update values 00:03:15
JavaScript Arrays 00:05:17
Working with Array Methods JavaScript 00:05:32
Array Methods extended 00:08:57
Sorting and more with Arrays JavaScript 00:04:30
More with Arrays JavaScript 00:03:48
Objects and Arrays together 00:09:29
JavaScript if condition statement 00:06:45
JavaScript switch statement 00:04:41
JavaScript Do while loops 00:05:54
For loops and more JavaScript 00:04:03
Looping items in arrays and objects JavaScript 00:04:35
JavaScript introduction to functions 00:05:15
Working with JavaScript Functions 00:07:56
Global and Local Variables Functions 00:05:58
Self-Executing function 00:02:57
Break out of function JavaScript 00:02:03
JavaScript String Methods 00:07:52
Strings and Arrays 00:02:18
Numbers to strings back to numbers 00:02:28
JavaScript Math Method 00:03:20
JavaScript Date Method 00:07:31
Chapter 12 : JavaScript DOM
What is the DOM 00:06:44
Select Node value using JavaScript 00:07:00
JavaScript Objects and selection within the DOM 00:07:54
Windows Object Model 00:04:16
document write method 00:02:09
Selecting Elements by ID 00:08:05
Update Output Div content from input form 00:07:09
Select Elements by Tag Name 00:10:01
Selecting elements by Class 00:03:11
document query Selector 00:05:40
Making Selections like CSS 00:06:00
Traversing the DOM 00:07:40
Add styling to Elements Dynamically 00:04:52
Append and Remove Elements using JavaScript 00:06:52
Add Event listeners to elements using JavaScript 00:04:40
Event listeners click events 00:05:07
Hover over elements make them change background color 00:08:28
Image popup window 00:06:35
Chapter 13 : Create a single page website from scratch HTML CSS JavaScript
Single page website section introduction what we are building 00:02:06
development environment setup 00:03:18
webpage setup 00:03:13
Setup Nav Structure and Elements 00:03:58
Style NavBar CSS 00:05:18
Add Placeholder Content to Sections 00:06:54
Tweak Header NavBar and Sections 00:06:47
CSS HTML Build Sections 00:08:22
Build Page Footer 00:04:56
Final Page Tweaks 00:05:48
JavaScript ScrollSpy Effect 00:08:26
Webpage Final Overview 00:05:03