Web Development: Unraveling HTML, CSS, and JavaScript

Name: Web Development: Unraveling HTML, CSS, and JavaScript
Author: Istvan Novak

246 Lessons

13 Quizzes

326 Playgrounds

479 Illustrations

Course Overview
HTML, CSS, and JavaScript: The trinity of web development technologies. If you’re looking to get ramped up on front-end development, this course is for you. You'll find it particularly useful if you're coming from some other area of software development, although prior experience is no...
Train, upskill, & onboard your developers with a tailored solution for your team or company with
Educative for Business

How You'll Learn
Hands-on coding environments
You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
Faster than videos
Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.
No set-up required
Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.
Progress you can show
Built in assessments let you test your skills. Completion certificates let you show them off.
Hands-on coding environments
You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
Faster than videos
Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.
No set-up required
Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.
Progress you can show
Built in assessments let you test your skills. Completion certificates let you show them off.
Course Contents
1. Commencing the Journey: Introductions and Conventions
Introduction
Who is This Course For?
What This Course Covers
Conventions
2. A Short Tour of HTML, CSS, and JavaScript
Getting Started with Live Coding!
Hands-On: Diving into HTML Basics
How it Works: Creating a Basic HTML Page
Hands-On: Formatting the HTML Page
How It Works: Formatting Our HTML Page
Inline Styling Our HTML Page
Hands On: Using an Embedded Style Sheet
How It Works: Using an Embedded Style Sheet
Hands On: Moving Styles into a Separate File
How It Works: Moving Styles into a Separate File
Hands On: Defining Visual Behavior with CSS
How It Works: Defining Visual Behavior with CSS
Hands On: Adding Actions to the Web Page with JavaScript
How It Works: Adding Actions to the Web Page with JS
Meeting the DOM
Leveraging Page Inspector
Hands On: Using jQuery
How jQuery Works
Debugging JavaScript
Summary
3. HTML5: First Impressions and Beyond
The Unordinary Story of HTML5
What's Behind the Term HTML5?
HTML5 Markup Basics
Using HTML <head>
Defining HTML Content
Exercises: Content and Structure
Enriching Web Pages: Rendering Text
Rendering Text: Code Along Exercises
Using Reserved Characters and Symbols in HTML
Adding Paragraphs and Text Breaks in HTML
Enriching Web Pages: Adding Headings
Enriching Web Pages: Adding Lists
Enriching Web Pages: Adding Links
Enriching Web Pages: Adding Images
Lists, Links, and Images: Bonus Fun Exercise!
Summary
4. Achieving Richer User Experience with HTML
What it's All About
Old Style: The Omnipotent <div>
Structure and Semantics
Headers
HTML Footers
Sections
Figures in the Page
Sidebars
Navigation
Other Semantic Elements
World of HTML Tables
Defining a Simple Table in HTML
Spanning Rows and Columns
Markup for Table Headers
Defining Styles for Tables
Table Captions
Compound Tables
Hands On: Scrolling the Table Body
How It Works: Scrolling the Table Body
Making Things Exciting With Multimedia
New HTML5 Markup
How It Works: Using the Video Tag
Hands On: Using the Video Tag
Video Formats
Hands On: Supporting Multiple Video Formats
How It Works: Supporting Multiple Video Formats
Video Resilient Web Pages and the Audio Tag
What You Cannot Do with <video> and <audio>
Summary
5. Forms and Controls
Web Forms Basics
Hands On: Representing Web Forms in HTML
Controls Overview
Hands On: Using Controls to Build Web Forms
How It Works: Using Controls to Build Web Forms
Hands On: Using Controls that Allow Specifying Options
Hands On: Sending and Processing Form Data
How it Works: Sending and Processing Form Data
Hands On: Catching Data at the Server
How it Works: Catching Data at the Server
Using GET and POST
Hands On: Making Use of More Controls
How it Works: Making Use of More Controls
Using Hidden Fields
Using <optgroup> in Dropdown Lists
Using Buttons
Form Validation
Validation Attributes
Validation and JavaScript
Summary
6. A Few More Things On HTML
Other HTML Elements
Thematic Breaks
Quotes
Images and Mappings
Visualizing Progress
Refining Markup Details
Inline Frames
Custom Attributes
Hands On: Painting the Canvas
How it Works: Painting the Canvas
Hands On: Vivifying the Canvas
How it Works: Vivifying the Canvas
Hands On: Drawing the Trajectory
How it Works: Drawing the Trajectory
What Else You Can Do with a Canvas
Facing the Past and Future of HTML5
Issues with New HTML5 Tags
HTML5 Tools and Validation
Checking HTML5 Compatibility
Summary
7. Delving into the Document Object Model
DOM Basics
Ubiquitous Language of Page Representation
Cornerstone of Interactions
The DOM Application Programming Interface
What the DOM Covers
Hands On: Querying the Document
How it Works: Querying the Document
Hands On: Changing the DOM
How it Works: Changing the DOM
Hands On: Completing Event Handling
Navigating in the Document Tree
Node Navigation Basics
Accessing Element Content
A Brief Navigation Reference
Element Specific Properties
Changing the Document Tree
Adding New Child Elements to the Document
Adding Adjacent Elements
Removing and Replacing Elements
Changing Attributes and Element Style
Using Event Parameters
Going Global: Global Attributes
Going Global: Global Events
Summary
8. Entering the Realm of JavaScript
A Couple of JavaScript Peculiarities
A Brief History of JavaScript
Objects and Dynamism
Functions are First Class Citizens
Regular Expression Literals
Placing JavaScript in HTML
JavaScript Syntax Basics
Variables
Types
Argument Passing
Understanding Scopes
Working With the Boolean Type
Working With the Number Type
Converting to the Number Type
Number Methods
Working With the String Type
Converting to Strings
String Properties and Functions
Working With the Date Type
Working With the Object Type
A Quick Overview of Function Prototypes
Instance Properties and Methods
Working With the Array Type
Array Conversions
Array Operations: Creating Stacks and Queues
Array Methods to Manipulate Strings
Array Methods to Change Element Ordering
Advanced Array Operations
Unary Operators
Arithmetic Operators
Equality Operators
Relational and Boolean Operators
Bitwise Operators
Assignment Operators
Conditional, Comma, typeof, and instanceof Operators
Operator Precedence
The if, while, and do-while Statements
The for and for-in loops
The switch and with Statements
Summary
9. Advanced JavaScript Programming
The JavaScript Object Notation
Serializing and Parsing JSON
Functions
Specifying Function Expressions
Recursive Functions
Closures
Programming with Objects
Object Properties
Removing Object Properties
Instantiating Objects
Using Object Prototypes
Object Inheritance
Modularity
The Browser Object Model
Methods of the Windows Object
The History Object
The Location Object
The Navigator Object
The Screen Object
Error Handling
The onerror Event
Managing Errors
Summary
10. Introducing CSS in Style
Styles and Cascading Style Sheets
Styling Page Elements
CSS At-Rules
The Concept of Cascading
Selectors
Attribute selectors
Group Selectors and the Universal Selector
Pseudo-Element and Pseudo-Class Selectors
Descendent Selectors
Child Selectors
Sibling Selectors
Other Selectors
Style Properties
Colors
Length, Size Types and URL Values
Baseline Style Sheet
The Cascading Order
Selector Group Priorities
Calculating Selectivity
Location Priorities
Media-Dependent Style Sheets
Adding Media Style Sheets
Media Queries
Summary
11. Basic Style Patterns
Text Formatting
Font Type, Size, and Color
Text Styles
Paragraphs
Styling Lists
Using Web Fonts
The Box Model
Margins and Paddings
Special Behavior of Margins
Setting Up Borders
Height and Width of the Box
Boxing Inline Elements
Using Floating Elements
Using Background Images
Positioning Background Images
Aligning Background Images with Borders and Paddings
Sizing Background Images
The Background Shorthand Notation
Styling Tables
Basic Font and Colors
Adjusting Text
Setting Up Table-Specific Properties
Styling Tips for Forms
Summary
12. The Voyage Ahead
Career Paths After This Course
Learning Paths After This Course

Join 450,000 learners from companies like

COURSE BY:

Istvan Novak

Teams of every size choose
Educative for Business
to train, upskill & onboard their developers

Learn in-demand tech skills in half the time

LEARN

Courses

Early Access Courses

Edpresso

Assessments

New

Blog

Pricing

Free Trial

New

For Business

CodingInterview.com

SCHOLARSHIPS

For Students

For Educators

CONTRIBUTE

Become an Author

Become an Affiliate

LEGAL

Business Terms of Service

Our Team

Careers

Hiring

For Bootcamps

Blog for Business

Quality Commitment

FAQ

Press

Web Development: Unraveling HTML, CSS, and JavaScript

Course Overview

How You'll Learn

Hands-on coding environments

Faster than videos

No set-up required

Progress you can show

Hands-on coding environments

Faster than videos

No set-up required

Progress you can show

Course Contents

1. Commencing the Journey: Introductions and Conventions

2. A Short Tour of HTML, CSS, and JavaScript

3. HTML5: First Impressions and Beyond

4. Achieving Richer User Experience with HTML

5. Forms and Controls

6. A Few More Things On HTML

7. Delving into the Document Object Model

8. Entering the Realm of JavaScript

9. Advanced JavaScript Programming

10. Introducing CSS in Style

11. Basic Style Patterns

12. The Voyage Ahead

Join 450,000 learners from companies like

Teams of every size choose Educative for Business to train, upskill & onboard their developers

Teams of every size choose
Educative for Business
to train, upskill & onboard their developers