Home>
Courses>

Web Development: Unraveling HTML, CSS, and JavaScript

Web Development: Unraveling HTML, CSS, and JavaScript

Explore HTML, CSS, and JavaScript fundamentals. Gain insights into forms, controls, OOP in JavaScript, and key CSS patterns. Create responsive, stylized, and performant web applications.

Beginner

246 Lessons

20h

Certificate of Completion

Explore HTML, CSS, and JavaScript fundamentals. Gain insights into forms, controls, OOP in JavaScript, and key CSS patterns. Create responsive, stylized, and performant web applications.

AI-POWERED

Code Feedback
Explanations

AI-POWERED

Code Feedback
Explanations

This course includes

6 AI Feedbacks
327 Playgrounds
13 Quizzes

This course includes

6 AI Feedbacks
327 Playgrounds
13 Quizzes
Course Overview
Course Content

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 not required. In this course, you will start with a short tour of HTML, CSS, and JS. You’ll get to experiment with them through examples that explain their role and behavior. From there, you will then dive deep into each techn...Show More

Course Content

1.

Commencing the Journey: Introductions and Conventions

Get familiar with the essentials of HTML, CSS, and JavaScript for web development.
Introduction
Who is This Course For?
What This Course Covers
Conventions
2.

A Short Tour of HTML, CSS, and JavaScript

Get started with HTML, CSS, and JavaScript basics, live coding, and interactive web development.
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

Work your way through HTML5 basics, enhancing web pages with multimedia, text formatting, and embedded content.
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

Enhance your skills in creating richer user experiences with HTML5 semantic elements and multimedia integration.
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

Deepen your knowledge of creating, using, and validating HTML web 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

20 Lessons

Investigate advanced HTML elements, inline frames, semantic tags, and HTML5 compatibility tools.
7.

Delving into the Document Object Model

24 Lessons

Master the steps to interact with the DOM for dynamic, responsive web pages using JavaScript.
8.

Entering the Realm of JavaScript

40 Lessons

Step through essential JavaScript principles, from basic syntax to advanced array operations.
9.

Advanced JavaScript Programming

23 Lessons

Discover the logic behind advanced JavaScript concepts like JSON, functions, objects, BOM, and error handling.
10.

Introducing CSS in Style

24 Lessons

Examine the essentials of CSS, covering styles, selectors, cascading, and media queries.
11.

Basic Style Patterns

24 Lessons

Enhance your skills in CSS text styling, background images, box model, table, and form design.
12.

The Voyage Ahead

2 Lessons

Take a closer look at various career and learning paths in web development.

Course Author

Practice and apply your skills

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Adaptive Learning

Explain with AI

AI Code Mentor

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath