Learn HTML, CSS, and JavaScript from Scratch

This is a beginner-friendly course on learning HTML, CSS, and JavaScript interactively by creating functional web apps, such as to-do lists and carousels.

Beginner

36 Lessons

10h

Certificate of Completion

This is a beginner-friendly course on learning HTML, CSS, and JavaScript interactively by creating functional web apps, such as to-do lists and carousels.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Project

140 Playgrounds

41 Challenges

23 Quizzes

This course includes

1 Project

140 Playgrounds

41 Challenges

23 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

The chapter explores HTML essentials for structuring webpages, including elements, attributes, semantic organization, tables, and forms for user interaction.

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

The chapter covers how CSS styles HTML content by separating design from structure, utilizing cascades, selectors, and the box model.

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

The chapter introduces JavaScript and explains how it enhances web interactivity through different data types like numbers, strings, booleans, etc.

What is JavaScript?Numbers Strings Booleans Undefined / Null

JavaScript Program Flow and Data Structures

The chapter explores JavaScript's program flow and data structures, focusing on functions, conditional statements, loops, arrays, objects, and their interrelations.

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

The chapter explores dynamic web interactivity through DOM manipulation, covering element access, modification, event handling, and practical applications like an image carousel.

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

This chapter congratulates you on completing the course and enhancing your web development skills and confidence.

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!