HomeCoursesWeb Development: Unraveling HTML, CSS, and JavaScript

4.5

Beginner

20h

Updated 5 months ago

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.

Join 2.7 million developers at

Overview

Content

Reviews

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 technology, exploring concepts like forms and controls in HTML, OOP in JavaScript, and the most important CSS patterns to make your web pages look good. By the end of this course, you will be able to make your own web applications that are responsive, stylized, and performant.

HTML, CSS, and JavaScript: The trinity of web development technologies. If you’re looking to get ramped up on front-end developm...Show More

Content

246 Lessons13 Quizzes

Commencing the Journey: Introductions and Conventions

4 Lessons

Get familiar with the essentials of HTML, CSS, and JavaScript for web development.

Introduction

Who is This Course For?

What This Course Covers

Conventions

A Short Tour of HTML, CSS, and JavaScript

20 Lessons

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

HTML5: First Impressions and Beyond

16 Lessons

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

Achieving Richer User Experience with HTML

29 Lessons

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

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

Forms and Controls

20 Lessons

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

A Few More Things On HTML

20 Lessons

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

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

Delving into the Document Object Model

24 Lessons

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

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

Entering the Realm of JavaScript

40 Lessons

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

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

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

Advanced JavaScript Programming

23 Lessons

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

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

10.

Introducing CSS in Style

24 Lessons

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

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

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

24 Lessons

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

Text Formatting

Font Type, Size, and Color

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

2 Lessons

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

Career Paths After This Course

Learning Paths After This Course

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Istvan Novak

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

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

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

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.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

Learn HTML, CSS, and JavaScript from Scratch

Discover the essentials of HTML, CSS, and JavaScript to build interactive web applications through hands-on exercises, creating modules like an image carousel and a to-do list.

10 h

beginner

Course

The Complete Guide to jQuery

Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

6 h

beginner

Course

Intermediate JavaScript: Building Frontend Components

Gain insights into building real-world components using JavaScript. Delve into dropdown menus, auto-validating forms, autocomplete search, infinite scroll, and tooltips to tackle common frontend challenges seamlessly.

10 h

intermediate

Course

Web Development: A Primer

Delve into web development fundamentals, exploring HTML, CSS, JavaScript, and version control. Gain insights into essential web technologies to confidently pursue further learning and projects.

5 h

beginner

Course

Beginning Flutter: Android Mobile App Development

Delve into Flutter's UI framework to build high-quality Android apps, from creating contact profiles to enhancing them with themes and API integration, culminating in app publication.

10 h

beginner

Course

Grokking Bit Manipulation for Coding Interviews

The ultimate guide to bit manipulation for coding interviews. Developed by FAANG engineers, practice with real-world interview questions, and get interview-ready in just a few hours.

3 h

intermediate

Course

Full-Stack Web Applications with Firebase

Gain insights into creating and launching full-stack web applications swiftly using Firebase. Learn about Firebase Authentication, Cloud Firestore, Firebase Storage, and Firebase Hosting through hands-on projects.

13 h

beginner

Course

Coderust: Hacking the Coding Interview

The ultimate guide to coding interviews. Developed by FAANG engineers, practice with real-world questions in top languages. Prep faster and get interview-ready in just a few hours.

40 h

beginner

Course

Learn HTML, CSS, and JavaScript from Scratch

beginner

10 hour

Course

The Complete Guide to jQuery

beginner

6 hour

Course

Intermediate JavaScript: Building Frontend Components