Getting started modules - Learn web development | MDN * Skip to main content * Skip to search 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… JavaScript JS 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 * Getting started modules Theme * OS default * Light * Dark English (US) Remember language Learn more * Deutsch * English (US) * Español * Français * 日本語 * 한국어 * Русский * 中文 (简体) Getting started modules Welcome to Getting started ! If you are a complete beginner (i.e., you've not installed a code editor or written any code yet), then this is the place to be. The Getting started modules take you through installing the software you need, familiarity with your development environment, taking your first stab at building a simple website, and understanding some of the essential concepts surrounding web development. In this article * Prerequisites * Modules * See also Prerequisites There is no prerequisite knowledge for starting this course. Also note that we don't consider learning these topics as required before moving on to the Core modules , but we believe students will have an easier time if they spend some time on these topics first. Modules Environment setup In the Environment setup module, we show you what tools you need to do simple web development and how to install them properly and help you understand important aspects of your environment such as file systems and the command line. Your first website This module introduces you to the practicalities of web development. You'll gather the assets and write the code to construct and publish a simple webpage. Web standards This module covers the fundamentals of how the web works at a high level — including the model used for communication, the core technologies involved, how those technologies are created, and how a web browser renders and displays websites to a user. Soft skills This module provides recommendations of soft skills you can aim to get better at while learning web development, and which constitute good traits to have when entering the industry. They will help immensely in developing the right attitudes for learning, researching, and collaborating, and increase the chances of getting hired. See also The Frontend Developer Career Path MDN learning partner Scrimba's Frontend Developer Career Path teaches all you need to know to be a competent front-end web developer, with fun interactive lessons and challenges, knowledgeable teachers, and a supportive community. Go from zero to landing your first front-end job! Many of the course components are available as standalone free versions. Help improve MDN Yes No Learn how to contribute This page was last modified on Apr 18, 2025 by MDN contributors . View this page on GitHub • Report a problem with this content 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 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 * Glossary * Hacks blog * Website Privacy Notice * Telemetry Settings * Legal * Community Participation Guidelines Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license .