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.

Beginner

36 Lessons

10h

Certificate of Completion

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.

AI-POWERED

Code Feedback

Explanations

AI-POWERED

Code Feedback

Explanations

This course includes

5 AI Feedbacks

1 Project

140 Playgrounds

41 Challenges

20 Quizzes

This course includes

5 AI Feedbacks

1 Project

140 Playgrounds

41 Challenges

20 Quizzes

Course Overview

This course will teach you the fundamentals of creating web applications, from the basics of creating web pages with HTML, stylizing content with CSS, all the way to building interactivity into a page using JavaScript in the browser. Instead of watching tedious videos and wondering how to translate those videos into real code, you'll be practicing what you learn through interactive, test-based exercises within minutes. Along the way, you'll be able to produce functional modules, including an image carous...Show More

TAKEAWAY SKILLS

Javascript

Front End Development

Learn To Code

Html

Css

What You'll Learn

Creating basic pages with HTML

Styling HTML content with CSS

Basic programming in JavaScript

Adding interactivity through DOM

What You'll Learn

Creating basic pages with HTML

Course Content

Semantic Web Page Layout with HTML

Learn how to use HTML for structuring semantic, accessible, and well-organized web pages effectively.

What is HTML?

Attributes and Hyperlinking

Headings and Lists

Inline vs. Block Elements and Divs

id and class Attributes

The img Element

Delving into Semantics

HTML Tables

HTML Forms

Stylizing HTML Content using CSS

Get started with CSS fundamentals, selectors, box model, color, font styling, and text alignment.

What is CSS?

Introduction to the Cascade

Basic CSS Selectors

Selector Combinations

The Box Model

Color

Font Styling and Web Fonts

Text Alignment and Sizing

Introduction to JavaScript, Basic Data Types and Operators

Examine JavaScript's key concepts: data types, variables, DOM manipulation, and operators.

JavaScript Program Flow and Data Structures

Enhance your skills in JavaScript program flow and data structures, including functions, loops, arrays, and objects.

Program Flow: Functions

Program Flow: Conditional Statements

Program Flow: Loops

Data Structures: Arrays

Data Structures: Objects

Functions Are Just Variables

More on Objects: this Keyword

Building Interactivity with DOM Manipulation

Solve problems in DOM manipulation, attribute modification, event handling, and dynamic CSS interactions.

Accessing DOM Elements

Adding/Removing Elements

Modifying Element Attributes

Event Listeners

Modifying CSS

Building an Image Carousel

Create a To-do List Application using HTML, CSS, and JavaScript

Project

Wrap Up

1 Lesson

Simplify complex topics in web development and enhance your practical skills.

Course Author

Show License and Attributions

Part of the Front-end Developer Learning Path

Become a Front-end Developer

Go from complete beginner to creating interactive websites using HTML, CSS, and JavaScript.

4 Modules

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

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

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!