Getting Started

To get started with web development, you will need to have a good text editor or IDE to work with. You will also regularly stumble upon issues to solve, so knowing where to find the answers or how to ask question is crucial for your learning journey.

• Path 0Beginner

  Code Editor

  • Visual Studio Code
  • WebStorm
• Path 0Beginner

  Documentation and Resources

  • MDN Web Docs
  • JavaScript.info
  • HTML Reference
  • CSS Reference
• Path 0Intermediate

  Knowing how and where to ask Questions

  • How to Ask Technical Questions
  • How to ask a good question
  • Stack Overflow

Internet

Learn the basics of the internet and how it works.

• Path 1Beginner

  World Wide Web

  • What is the World Wide Web?
  • Web Standards: the what, the why, and the how?
• Path 1Beginner

  Different type of Protocols

  • Introduction to the Intenet Protocol (IP)
  • Definitions of different type of Protocols
• Path 1Intermediate

  Browser

  • Internal Operations of Browser Engines
  • How Browsers Work
• Path 1Intermediate

  Domain Name System and More

  • Introduction to Domain Name System (DNS)
  • Indepth explanation of the DNS

HTML

HTML stands for Hyper Text Markup Language. It is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.

• Path 2Beginner

  Basics

  • FreeCodeCamp Web Dev Tutorial
  • HTML Full Course
  • HTML History and Syntax
  • Introduction to HTML
  • Learn HTML
  • Best Practices
• Path 2Intermediate

  Semantics and Accessibility

  • What are Semantics
  • How Semantic HTML improves your site
  • Learn Accessibility (MDN)
  • Learn Accessibility (Web.dev)
  • Making a Strong Case for Accessibility
  • Complete Guide to Accessibility Tooling
• Path 2Advanced

  Forms and Tables

  • Forms
  • Tables
  • Learn Forms

CSS

Learn the basics of CSS.

• Path 3Beginner

  Basics

  • What is CSS
  • Applying CSS to HTML
  • Learn CSS
• Path 3Intermediate

  Display Type and Blocks of Styling

  • The Box Model
  • Selectors
  • CSS Specificity
  • Overflowing Content
  • More on the Topic
• Path 3Intermediate

  Layouting

  • Normal Flow
  • Learn Flexbox with Flexbox Froggy
  • Complete Guide to Flexbox
  • Learn CSS Grid
  • Complete Guide to Grid
• Path 3Advanced

  Responsive Websites

  • Responsive Web Design
  • Using Media Queries
  • Learn Responsive Design
  • Responsive Images
  • Responsive Web Design Basics
  • Responsive Web Design