Explore how to build amazing interactive and dynamic websites using HTML, CSS, JavaScript, and jQuery
About This Video
In Detail
This course starts from scratch, teaches you how …
Explore how to build amazing interactive and dynamic websites using HTML, CSS, JavaScript, and jQuery
About This Video
In Detail
This course starts from scratch, teaches you how to create websites, and covers everything from the basic syntax (all the common tags used to develop web content and how and where you can write HTML) top resources and links included.
You will learn about HTML structure within web pages; explore HTML5 semantic elements; build your own HTML template; create HTML lists, hyperlinks, and add images; build tables for even more HTML structure; create forms with in-depth form examples and HTML tag explanations; add iframes and more cool HTML elements; create your own mini-HTML site using only HTML; and everything you want to know about CSS, JavaScript, JavaScript Document Object Model (DOM), JSON, AJAX, and jQuery.
By the end of this course, you will be able to build amazing interactive and dynamic websites using HTML, CSS, JavaScript, and jQuery.
Audience
This course is for everyone who wants to learn web development skills, anyone who wants to learn HTML5, CSS3, and JavaScript, and web design beginners.
Chapter 1 : Introduction to Web Development and Web Design
Introduction to Web Development
How to Use This Course
Chapter 2 : Learn HTML Course Section
Introduction to HTML
Getting to Know HTML
What is an Element
HTML Page Structure
HTML Metadata
HTML Doctype
Try to Make Index Page
Element Formatting HTML
HTML Headings
Self-Closing Tags
HTML Exercise #2
HTML Comments
Preformatted Text
HTML Entities
HTML Text Formatting
More HTML Text Formatting
Practice Text Formatting
Divs and Spans to Organize Content
HTML5 Semantic Elements
Exercise 3: HTML5 Semantic Elements
Placeholder Content
Hyperlinks Anchor Tag
Try to Build a Page
Adding Images to Your Page
Exercise 4: Images
HTML Lists
Exercise 5: Adding Lists
Exercise 6: Rebuild the First Website
Exercise 7: Nested Lists
HTML Tables
HTML Tables with Style
HTML Forms
Create a Contact Form
HTML Form Options
Form Submission
More Input Types HTML5
More with HTML5 Forms
HTML Form Fieldset
Exercise 9: Form Practice
HTML iframes
Exercise #10: Build a Site
Chapter 3 : CSS Section
Introduction to CSS.
What is CSS
Basics of CSS
CSS Inline Style
CSS Style Tag Styling
Creating and Using CSS File
CSS Selection and Classes
CSS Colors.
CSS Background Property
CSS Display Property
CSS for List Items
CSS Exercise #1: Style a Simple Website
Measures and Properties of CSS
CSS Divs and Spans
Styling Text CSS
CSS Font Family
Google Fonts CSS
CSS Exercise #2
CSS Floats Images
CSS Float Elements
CSS Box Model
Exercise 3: CSS
Exercise 3: Solution
CSS Outline
CSS Position
Exercise #4: Image Grid
CSS Fun with Hyperlinks
CSS Pseudo Classes
CSS and Tables
CSS Overflow and MaxWidth
CSS Element Alignments
Website Project Part 1
Website Project Part 2
Website Project Part 3
Chapter 4 : Learn JavaScript Section
Welcome to JavaScript
Write JavaScript
Update HTML Element
JavaScript Code
JavaScript Variables
JavaScript Variables in Action
JavaScript Try it, Exercise #1
Operators and Assignments
JavaScript Functions
JavaScript Exercise #2: Function
Closer Look at Functions
JavaScript Objects
JavaScript #3 Exercise: 3 Objects
JavaScript Arrays
Array Methods
Condition Statements JavaScript
Combine with Functions
JavaScript Switch
JavaScript Loops
JavaScript String Methods
ES6 JavaScript
Document Object Model
Eventlisteners JavaScript
JavaScript Exercise #4: Event Checker Exercise
Chapter 5 : JavaScript Document Object Model
Introduction to JavaScript DOM
What is the DOM
JavaScript DOM Manipulation
JavaScript DOM Selection
Element Text Manipulation
Change Classes DOM
Change Styles DOM
Element Attribute Manipulation
Interactive DOM Events
Select Multiple Elements
KeyPress Events.
JavaScript Mouse Events
JavaScript DOM Create Your Own Elements
Event listeners to New elements
Create Dynamic List
List Project Exercise Input: Add New Element
Project Bonus: Adding Object Value
Chapter 6 : JavaScript JSON and AJAX
Introduction to JSON
What is JSON
JSON as Data
Solution Create JSON
JSON Details
Solution: Output JSON to HTML
JavaScript Arrays of Objects
JavaScript Solution Array Objects
JavaScript Loop Object Data
Solution Loop Object Data
JavaScript Add to Object
JavaScript JSON methods
Local Storage Values
Solution: Local Storage
JavaScript Fetch
Solution: JavaScript Fetch.
Catching Errors Shorthand
JSON with Multiple Items
Solution forEach JSON
JSON Conclusion
Chapter 7 : Learn jQuery
jQuery Introduction to the Section
Why jQuery and What is it
Selecting with jQuery
jQuery Fun with Styling
jQuery Content
jQuery Attributes
Image and Form Attributes
jQuery Click Events
Document Ready Event Listener
jQuery Mouse Events
Keyboard Events jQuery
jQuery on Event listener
jQuery Effects Hide Show
jQuery Fade Effect
jQuery Slide Effect
jQuery Animate Effect
jQuery AJAX
Load and CORS error
AJAX and Form Data
Multiple Items in Response Output
Select Element
Course jQuery Exercise
Chapter 8 : Web Design and Development: Questions, Answers, and Code Snippets
JavaScript PopUp Modal
Box Model and Border Box Sizing Example
How to Select Dynamic Elements from the Page Using QuerySelectorAll
Add Page Elements Dynamically to DOM add Event Listeners, All Matching Elements.