Revision 1106743 of Learning web development

<div>
<p class="summary">Welcome to the MDN Learning Area. This set of articles aims to provide complete beginners to web development with all they need to start coding simple websites.</p>
</div>

<p>The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable". From there you should be able to start making your way, learning from <a href="https://developer.mozilla.org/en-US/">the rest of MDN</a>, and other intermediate to advanced resources that assume a lot of previous knowledge.</p>

<p>If you are a complete beginner, web development can be challenging — we will hold your hand&nbsp;and provide enough detail for you to feel comfortable and learn the topics properly. You should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how web technologies work.</p>

<div class="warning">
<p><strong>Important</strong>: The content in Learning Area is at an early stage, with more being added regularly. If you have questions regarding topics you'd like to see covered or feel are missing, see the {{anch("Contact us")}} section below for information on how to get in touch.</p>
</div>

<h2 id="Where_to_start">Where to start</h2>

<ul class="card-grid">
 <li><span>Complete beginner:</span> If you are a complete beginner to web development, we'd recommend that you start by working through our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> module, which provides a practical introduction to web development.</li>
 <li><span>Specific questions:</span> If you have a specific question about web development, our <a href="/en-US/docs/Learn/Common_questions">Common questions</a> section may have something to help you.</li>
 <li><span>Beyond the basics:</span> If you have a bit of knowledge already, the next step is to learn {{glossary("HTML")}} and {{glossary("CSS")}} in detail: start with our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module and move on to our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module.</li>
 <li><span>Moving onto scripting:</span> If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move onto {{glossary("JavaScript")}}. Begin with our <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> module.</li>
</ul>

<div class="note">
<p><strong>Note</strong>: Our <a href="/en-US/docs/Glossary">Glossary</a> provides terminology definitions.</p>
</div>

<div class="note">
<p><strong>Note</strong>: We'll publish more core learning material in the future. Our "Advanced learning material" menu on the left points to other learning material on MDN, which isn't necessarily part of the Learning Area, but is still useful.</p>
</div>

<p>{{LearnBox({"title":"Random glossary entry"})}}</p>

<h2 id="Contact_us">Contact us</h2>

<p>If you want to get in touch with us about anything, the best way is to drop us a message on our <a href="/en-US/docs/MDN/Community/Conversations#Asynchronous_discussions">mailing lists</a> or <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC channels</a>. We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or anything else.</p>

<p>If you're interested in helping develop/improve the content, take a look at <a href="/en-US/Learn/How_to_contribute">how you can help</a>, and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.</p>

<p>{{CommunityBox("Learn", "dev-mdc", "mozilla.dev.mdc", "mdn")}}</p>

<h2 id="See_also">See also</h2>

<dl>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>A great interactive site for learning programming languages from scratch.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Basic coding theory and practice, mainly aimed at children/complete beginners.</dd>
 <dt><a href="https://teach.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
 <dd>A framework for entry-level web literacy &amp; 21st Century skills, which also provides access to teaching activities sorted by category.</dd>
 <dt><a href="https://teach.mozilla.org/activities">Teaching activities</a></dt>
 <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd>
</dl>

<h2 id="Subnav">Subnav</h2>

<ol>
 <li><a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the web</a></li>
 <li><a href="/en-US/Learn/HTML">HTML — structuring the Web</a>
  <ol>
   <li><strong><a href="https://developer.mozilla.org/en-US/Learn/HTML">HTML overview</a></strong></li>
   <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML overview</a></strong></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Assessment: Marking up a letter</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Assessment: Structuring a page of content</a></li>
    </ol>
   </li>
   <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding overview</a></strong></li>
     <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From object to iframe — other embedding technologies</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
     <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Assessment: Mozilla splash page</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="/en-US/Learn/CSS">CSS — styling the Web</a>
  <ol>
   <li><strong><a href="/en-US/Learn/CSS">CSS overview</a></strong></li>
   <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS overview</a></strong></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">How CSS works</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS syntax</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">The box model</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Assessment: Fundamental CSS comprehension</a></li>
    </ol>
   </li>
   <li><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text overview </a></strong></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Assessment: Typesetting a community school homepage</a></li>
    </ol>
   </li>
   <li><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes overview</a></strong></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li>
     <li><a href="/en-US/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Assessment: Creating fancy letterheaded paper</a></li>
     <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Assessment: A cool looking box</a></li>
    </ol>
   </li>
   <li><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout overview</a></strong></li>
     <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
     <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
     <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
     <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="/en-US/Learn/JavaScript">JavaScript — dynamic web scripting</a>
  <ol>
   <li><strong><a href="/en-US/Learn/JavaScript">JavaScript overview</a></strong></li>
   <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/JavaScript/First_steps">First steps overview</a></strong></li>
     <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
     <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
     <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
     <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — variables</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
    </ol>
   </li>
   <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a>
    <ol>
     <li><strong><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks overview</a></strong></li>
     <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
     <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
     <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events">The concept of events</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="/en-US/Learn/Other_learning_material">Advanced learning material</a>
  <ol>
   <li><a href="/en-US/docs/Learn/WebGL">WebGL — graphics processing</a></li>
  </ol>
 </li>
 <li><a href="/en-US/docs/Learn/Common_questions">Common questions</a>
  <ol>
   <li><a href="/en-US/docs/Learn/HTML/Howto">HTML questions</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Howto">CSS questions</a></li>
   <li><a href="/en-US/Learn/Common_questions#How_the_Web_works">How the Web works</a></li>
   <li><a href="/en-US/Learn/Common_questions#Tools_and_setup">Tools and setup</a></li>
   <li><a href="https://developer.mozilla.org/en-US/Learn/Common_questions#Design_and_accessibility">Design and accessibility</a></li>
  </ol>
 </li>
 <li><a href="/en-US/Learn/How_to_contribute">How to contribute</a></li>
</ol>