导航|地址|刷新
Core learning modules - Learn web develo…


Skip to main content

Skip to search



MDN





HTML

HTML: Markup language

HTML reference
Elements

Global attributes

Attributes

See all…
HTML guides
Responsive images

HTML cheatsheet

Date & time formats

See all…
Markup languages
SVG

MathML

XML




CSS

CSS: Styling language

CSS reference
Properties

Selectors

At-rules

Values

See all…
CSS guides
Box model

Animations

Flexbox

Colors

See all…
Layout cookbook
Column layouts

Centering an element

Card component

See all…




JavaScriptJS

JavaScript: Scripting language

JS reference
Standard built-in objects

Expressions & operators

Statements & declarations

Functions

See all…
JS guides
Control flow & error handing

Loops and iteration

Working with objects

Using classes

See all…




Web APIs

Web APIs: Programming interfaces

Web API reference
File system API

Fetch API

Geolocation API

HTML DOM API

Push API

Service worker API

See all…
Web API guides
Using the Web animation API

Using the Fetch API

Working with the History API

Using the Web speech API

Using web workers




All

All web technology

Technologies
Accessibility

HTTP

URI

Web extensions

WebAssembly

WebDriver

See all…
Topics
Media

Performance

Privacy

Security

Progressive web apps




Learn

Learn web development

Frontend developer course
Getting started modules

Core modules

MDN Curriculum

Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module

CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module




Tools

Discover our tools


Playground

HTTP Observatory

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Color mixer

Shape generator




About

Get to know MDN better


About MDN

Advertise with us

Community

MDN on GitHub




Blog





Toggle sidebar
Learn

Core learning modules

Theme

OS default

Light

Dark



English (US)

Remember language Learn more

Deutsch

English (US)

Español

Français

日本語

中文 (简体)







Core learning modules


Our Core modules cover topics that we feel every web developer should have a good grounding in. This includes all the information they need to design and build a basic, accessible web app that follows modern best practices, and manage and deploy their code using appropriate tools.



In this article

Prerequisites

Modules



Prerequisites

While there is no prerequisite knowledge for starting this set of modules, we would recommend that you familiarize yourself with your computer, make sure you've got a basic set of required applications installed (such as web browsers and a code editor), and do some background reading on the web and web technologies, if you have not already done so. All these topics are covered in our Getting started modules.

In particular, if you've never done any coding before, we'd recommend the Your first website module, which introduces you web technologies very gently and takes you through the process of building a simple website.



Modules
Structuring content with HTML
To build a high-quality, usable, accessible website, you need to understand how to define your content structure using semantic HTML. This module covers the basics of the HTML language, before looking at key areas such as document structure, links, lists, images, forms, and more.
CSS styling basics
CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides all the CSS fundamentals you'll need for now, including syntax, features, and techniques.
CSS text styling
With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
CSS layout
In previous modules we looked at how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to correctly lay out your boxes in relation to one another, and the browser viewport. This module looks at floats, positioning, other modern layout tools, and building responsive designs that will adapt to different devices, screen sizes, and resolutions.
Dynamic scripting with JavaScript
JavaScript is a huge topic, with so many different features, styles, and techniques to learn, and so many APIs and tools built on top of it. This module focuses mostly on the essentials of the core language, plus some key surrounding topics — learning these topics will give you a solid basis to work from.
JavaScript frameworks and libraries
JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. In this set of articles, we aim to give you a comfortable starting point to help you begin learning frameworks.
Accessibility
Access to web content such as public services, education, e-commerce sites, and entertainment is a human right. No one should be excluded based on disability, race, geography, or other human characteristics. This module discusses the best practices and techniques you should learn to make your websites as accessible as possible.
Design for developers
The idea of this module is to (re-)introduce developers to design thinking. They may not want to work as designers, but having some basic user experience and design theory is good for everyone involved in building websites, no matter what their role. At the very least, even the most technical, "non-designer" developer should understand design briefs, why things are designed as they are, and be able to get into the mindset of the user. And it'll help them make their portfolios look better.
Version control
Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub.


Try our partner video courses

Interested in an interactive video course to complement our articles? Scrimba's Frontend Developer Career PathMDN learning partner also teaches the topics contained in the MDN Core modules and more!









Help improve MDN
Was this page helpful to you?
Yes No
Learn how to contribute
This page was last modified on Oct 29, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content




Filter sidebar Clear filter input


Learn web development

MDN curriculum

Getting started modules

Environment setup
Installing software

Browsing the web

Code editors

Dealing with files

Command line


Your first website
What will it look like?

Creating the content

Styling the content

Adding interactivity

Publishing


Web standards
How the web works

The web standards model

How browsers load websites


Soft skills
Research and learning

Collaboration and teamwork

Workflows and processes

Finding a job


Core modules

Structuring content with HTML
Basic HTML syntax

Web page metadata

Headings and paragraphs

Emphasis and importance

Lists

Test: HTML text basics

Advanced text features

Test: Advanced HTML text

Challenge: Letter markup

Structuring documents

Creating links

Test: Links

Challenge: Bird watching site

Images

Test: Images

Video and audio

Test: Audio and video

Challenge: Splash page

Table basics

Table accessibility

Challenge: Planet data table

Forms and buttons

Test: Forms and buttons

Challenge: Feedback form

Debugging HTML

Test: HTML tests index

Additional tutorials
Vector graphics

Embedding technologies



CSS styling basics
What is CSS?

CSS getting started

Challenge: Biography page

Basic selectors

Attribute selectors

Pseudo-classes and elements

Combinators

Test: Selectors

Box model

Test: Box model

Handling conflicts

Test: Cascade

Challenge: Fixing blog styles

Values and units

Test: Values and units

Sizing

Test: Sizing

Backgrounds and borders

Test: Backgrounds and borders

Overflow

Test: Overflow

Challenge: Sizing and decorating

Images, media, forms

Test: Images and forms

Styling tables

Challenge: Styling color scheme search

Debugging CSS

Test: Styling basics tests index

Additional tutorials
Advanced styling effects

Cascade layers

Multiple text directions

Organizing your CSS



CSS text styling
Text and font fundamentals

Styling lists

Styling links

Web fonts

Challenge: Community school homepage


CSS layout
Introduction

Floats

Test: Floats

Positioning

Test: Positioning

Flexbox

Test: Flexbox

CSS grid layout

Test: CSS grid

Challenge: Fundamental layout

Responsive web design

Media queries

Test: RWD & media queries

Challenge: mobile-first

Test: Layout tests index

Additional tutorials
Multiple-column layout

Practical positioning examples

Legacy layout methods

Supporting older browsers



Dynamic scripting with JavaScript
What is JavaScript?

JavaScript walkthrough

Troubleshooting

Variables

Test: Variables

Numbers and operators

Test: Math

Strings

String methods

Test: Strings

Arrays

Test: Arrays

Challenge: Story generator

Conditionals

Test: Conditionals

Loops

Test: Loops

Functions

Build your own function

Function return values

Test: Functions

Events

Event bubbling

Test: Events

Objects

Test: Objects

DOM scripting

Challenge: Image gallery

Network requests

JSON

Test: JSON

Challenge: House data UI

Debugging and error handling

Test: JavaScript tests index


JavaScript frameworks and libraries
Introduction

Framework features

React getting started

React ToDo app

React components

React events and state

React editing, filtering, conditional UI

React accessibility

React resources


Accessibility
What is accessibility?

Accessibility tools

Accessible HTML

Test: HTML a11y

Accessible CSS and JS

Test: CSS/JS a11y

WAI-ARIA

Test: WAI-ARIA

Accessible multimedia

Mobile accessibility

Challenge: A11y debugging

Test: A11y tests index


Design for developers

Version control

Extension modules

Advanced JavaScript objects
Object prototypes

Object-oriented programming

Classes in JavaScript

Test: Object-oriented JavaScript

Object building practice

Challenge: Bouncing balls features

Test: OOJS tests index


Client-side web APIs
Introduction

Video and audio

Drawing graphics

Client-side storage

Third-party APIs


Asynchronous JavaScript
Introduction

Using promises

Implementing promise-based APIs

Introducing workers

Challenge: Animation sequence


Web forms
Your first form

How to structure a web form

Basic native form controls

The HTML5 input types

Other form controls

Styling web forms

Advanced form styling

Customizable selects

Customizable listboxes

UI pseudo-classes

Client-side form validation

Sending form data

Additional tutorials
Custom form controls

JS form submission

Forms in legacy browsers

UI methods & controls



Understanding client-side tools
Overview

Package management

Sample toolchain

Deploying our app


Server-side websites
First steps
Introduction

Client-server overview

Server-side frameworks

Website security


Django (Python)
Django introduction

Dev environment setup

1: Local library tutorial

2: Skeleton website

3: Models

4: Django admin site

5: Home page

6: Generic list and detail views

7: Sessions framework

8: Authentication and permissions

9: Forms

10: Testing

11: Deploying

Django security

Challenge: Django blog


Express (Node.js)
Express/Node introduction

Dev environment setup

1: Local library tutorial

2: Skeleton website

3: Using databases with Mongoose

4: Routes and controllers

5: Displaying data

6: Working with forms

7: Deploying


Additional tutorials
Apache .htaccess

Server MIME type config

Plain Node.js server



Web performance
The "why" of web performance

What is web performance?

Perceived performance

Measuring performance

Multimedia: Images

Multimedia: video

Performant JavaScript

Performant HTML

Performant CSS

Performance business case

Best practices & tips


Testing
Introduction

Testing strategies

Common HTML and CSS problems

Feature detection

Automated testing

Automation environment setup


Further resources

How to solve common problems
Common CSS problems

Common HTML problems

Common JavaScript problems

Design and accessibility

Tools and setup

Web mechanics


About

Resources for educators

Changelog






MDN
Your blueprint for a better internet.











MDN
About

Blog

Mozilla careers

Advertise with us

MDN Plus

Product help
Contribute
MDN Community

Community resources

Writing guidelines

MDN Discord

MDN on GitHub
Developers
Web technologies

Learn web development

Guides

Tutorials
…(内容过长已截断)

------
导航页 打开网址