MDN Learning Area

Getting Started

• Getting started with Web Development
• HTML basics
• CSS basics
  • Video: Why is CSS So Weird?
• Javascript basics

Common questions

• HTML questions
• CSS questions
• Javascript questions
• How the web works
• Tools and setup
• Design and accessibility

Javascript

• Javascript - Dynamic client-side scripting
  • Javascript first steps
    • What is Javascript
    • A first splash into Javascript
    • What went wrong? Troubleshooting JavaScript
    • Storing the information you need - variables
    • Basic math in JavaScript — numbers and operators
    • Handling text - strings in Javascript
    • Useful string methods
    • Arrays
  • Javascript building blocks
    • Making decisions in your code - conditionals
    • Looping code
    • Functions - reusable blocks of code
    • Build your own function
    • Function return values
    • Introduction to events
  • Introducing objects
    • Object basics
    • Object oriented Javascript for beginners
    • Object prototypes
    • Inheritance in Javascript
    • Working with JSON data
    • Object building practice
  • Asynchronous Javascript
    • General asynchronous programming concepts
    • Introducing asynchronous Javascript
    • Cooperative asynchronous Javascript: Timeouts and intervals
    • Graceful asynchronous programming with Promises
    • Making asynchronous programming easier with async and await
    • Choosing the right approach
  • Client-side web APIs
    • Introduction to Web APIs
    • Manipulating documents
    • Fetching data from the server
    • Third-party APIs

HTML

• Structuring the web with HTML
• Introduction to HTML
• What’s in the head? Metadata in HTML
• HTML text fundamentals
• Creating hyperlinks
• Document and Website structure
• Images in HTML
• Adding vector graphics to the web
• HTML Tables

CSS

• CSS First Steps
  • What is CSS
  • Getting started with CSS
  • How CSS is structured
  • How CSS works
  • Using your new knowledge
• CSS Building Blocks
  • Cascade and inheritance
  • CSS selectors
    • Type, class, and ID selectors
    • Attribute selectors
    • Pseudo-classes and pseudo-elements
    • Combinators
  • The box model
  • Backgrounds and borders
  • Handling different text directions
  • Overflowing content
  • Values and units
  • Sizing items in CSS
  • Images, media and form elements
  • Debugging CSS
  • Organizing your CSS
• Styling text
  • Fundamental font and text styling
  • Styling lists
  • Styling links
  • Web fonts
• CSS layout
  • Introduction to CSS layout
  • Normal Flow
  • Flexbox
  • Grids
  • Floats
  • Positioning
  • Responsive design
  • Beginner’s guide to media queries
  • Legacy layout methods
  • Supporting older browsers

Accessibility

• Overview
  • What is accessibility?
  • HTML: A good basis for accessibility
  • CSS and Javascript best practices
  • WAI-ARIA basics

Tools and testing

• Overview
  • Understanding client-side web development tools
  • Git and GitHub
    • Hello World (from GitHub)
    • Git Handbook (from GitHub)
    • Forking projects (from GitHub)
  • Cross browser testing
    • Introduction to cross browser testing
    • Strategies for carrying out testing
    • Handling common HTML and CSS Problems
    • Handling common Javascript problems
    • Handling common accessibility problems
    • Implementing feature detection

Server-side scripting

• First steps
• Introduction to the server side
• Client-Server Overview
• Server-side web frameworks
• Website security

Express web framework

• Overview
• Express/Node introduction
• Setting up a Node development environment
• Express Tutorial: The Local Library website
• Express Tutorial Part 2: Creating a skeleton website
• Express Tutorial Part 3: Using a Database (with Mongoose)
• Express Tutorial Part 4: Routes and controllers
• Express Tutorial Part 5: Displaying library data
• Express Tutorial Part 6: Working with forms
• Express Tutorial Part 7: Deploying to production