Pro Members
Pro Members

100 Days Of Code: 2024 Web Development Bootcamp

Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!

  • 37 sections, 664 lectures
  • Total duration: 78h 50m
Start NowEnrollment Options
100 Days Of Code: 2024 Web Development Bootcamp

Course Overview

About This Course

You’ve watched tutorials, copied code, and still feel unsure how everything fits together—frontend vs backend, “websites” vs “web apps” vs “services,” and what you’re actually supposed to build to become job-ready. The hardest part isn’t motivation; it’s having a clear path that doesn’t leave gaps.

This bootcamp gives you that path with a structured, modular course you can follow step-by-step or jump into when you already know the basics. If you want extra accountability, the optional 100 Days of Code format helps you keep momentum with a realistic daily routine, plus a companion website and in-course annotations to guide you from start to finish.

By the end, you’ll be able to plan and build complete web projects that include a polished user interface, real backend logic, and data storage. You’ll know how to add the features people expect—accounts, secure interactions, uploads, and integrations—so your projects feel like real products, not isolated demos.

What You'll Learn

You’ll connect the full web stack—browser UI, server logic, and databases—while also tackling real-world features like payments, security, and APIs.

  • Build browser UIs

    Create user interfaces with HTML, CSS, and JavaScript, using correct document structure and the right elements. You’ll be able to implement layouts and styling that hold up as pages grow.

  • Write responsive CSS layouts

    Use core CSS tools like the box model, flexbox, positioning, and units, then level up with responsive design, CSS Grid, and custom CSS properties. You’ll be able to ship layouts that adapt cleanly across screen sizes.

  • Control the DOM with JS

    Manipulate the DOM with JavaScript and react to browser/user events to make pages interactive. You’ll be able to build dynamic behavior instead of static pages.

  • Create Node & Express backends

    Build backend-driven websites with NodeJS and ExpressJS, including dynamic routing and dynamic templates. You’ll be able to move logic off the page and into a maintainable server layer.

  • Work with SQL & NoSQL

    Connect SQL and NoSQL databases to your Node/Express apps and run database queries as part of real features. You’ll understand when to use each approach and how to integrate them into your backend.

  • Add production-grade features

    Implement authentication, file uploads, user input validation, and website security, and integrate third-party services like Stripe for payments. You’ll also be able to build REST APIs and explore Vue.js for richer interfaces.

Ready to get started?

See enrollment options

Prerequisites

  • No prior web development or programming knowledge is required — the course starts from scratch.

  • You only need a computer or Mac to get started.

Who Is This Course For?

  • Total beginners

    You’re starting at zero and want a guided route to becoming a web developer without guessing what to learn next. You’ll appreciate the step-by-step structure and the option to follow a daily challenge.

  • Self-taught learners

    You’ve tried learning from scattered resources and feel like you’re missing key connections between parts of the stack. This course helps you turn partial knowledge into a complete, usable workflow.

  • Experienced developers

    You already know some web development but want a deep, comprehensive reference to refresh fundamentals and push into more advanced areas. The modular setup lets you skip what you don’t need and focus where you want depth.

Curriculum Overview

Start Now

Preview the structure and pacing of this course before you begin.

  • Introduction [Day 1]10 lectures33m
    • 01Welcome to This Course! [Day 1]1:09 min
    • 02What Is "Web Development" & How Does The Web Work? [Day 1]7:50 min
    • 03The Three Key Programming Languages [Day 1]5:22 min
    • 04How The Web Works: A Deep Dive [Day 1]8:08 min
    • 05What About The "www"? [Day 1]0:00 min
    • 06The 100 Days of Code Challenge! [Day 1]3:50 min
    • 07How To Get The Most Out Of This Course [Day 1]3:39 min
    • 08Stuck in the Course? We Got you Covered! [Day 1]3:23 min
    • 09How To Use The Attached Code [Day 1]0:00 min
    • 10The Academind Pro Referral Program0:00 min
  • Building a First Website: HTML & CSS Basics [Days 1 - 5]44 lectures3h 22m
    • 01Module Introduction [Day 1]2:23 min
    • 02How to Create a Website [Day 1]5:19 min
    • 03Creating our First HTML Page [Day 1]8:28 min
    • 04Setting Up a Development Environment [Day 2]11:22 min
    • 05Why Visual Studio Code? [Day 2]2:06 min
    • 06Understanding HTML Elements [Day 2]6:01 min
    • 07Which HTML Elements Exist? [Day 2]7:16 min
    • 08Adding Another HTML Element [Day 2]7:24 min
    • 09Exploring HTML Attributes [Day 2]4:32 min
    • 10Quiz 1: Learning Check: HTML Basics [Day 2]0:00 min
    • 11Getting Started with CSS [Day 2]6:17 min
    • 12More CSS Styling [Day 2]2:38 min
    • 13Working with Colors [Day 3]8:11 min
    • 14Formatting our Code [Day 3]4:15 min
    • 15Working with the Browser Developer Tools [Day 3]6:13 min
    • 16Adding a Link [Day 3]6:40 min
    • 17You can Nest HTML Elements! [Day 3]2:18 min
    • 18Using Global CSS Styles [Day 3]7:49 min
    • 19CSS Code Formatting [Day 3]0:00 min
    • 20The HTML Document Skeleton & Metadata [Day 3]7:35 min
    • 21Visual Studio Code Shortcuts & Tricks [Day 3]7:49 min
    • 22Code Comments [Day 3]0:00 min
    • 23First Summary [Day 3]6:24 min
    • 24Quiz 2: Learning Check: HTML & CSS Basics [Day 3]0:00 min
    • 25Styling the Anchor Element Also with Pseudo Hover [Day 4]4:49 min
    • 26Why it's Called Cascading Style Sheets [Day 4]2:25 min
    • 27Storing CSS Code in External Files [Day 4]6:23 min
    • 28The Void Element Syntax [Day 4]1:22 min
    • 29Multiple Files & Requests [Day 4]6:06 min
    • 30Selecting Single Elements with the ID Selector [Day 4]5:39 min
    • 31Working with "font-size" and "px" [Day 4]5:14 min
    • 32Using Other Fonts from Google Fonts [Day 4]8:12 min
    • 33Understanding How HTML & CSS Handle Text & Whitespace [Day 5]0:00 min
    • 34Adding an Image [Day 5]4:48 min
    • 35Styling the Image & Using the Body Tag [Day 5]7:48 min
    • 36Styling the Overall Page Background [Day 5]1:58 min
    • 37Adding a Second HTML File [Day 5]5:34 min
    • 38A Word About File Name Conventions [Day 5]0:00 min
    • 39Quiz 3: Learning Check: More HTML & CSS Features [Day 5]0:00 min
    • 40A Challenge for You! [Day 5]2:31 min
    • 41Challenge Solution [Day 5]7:04 min
    • 42Using a Shared CSS File [Day 5]4:44 min
    • 43Organizing Source Files in Folders [Day 5]3:10 min
    • 44Summary [Day 5]3:54 min
  • Diving Deeper Into HTML & CSS [Days 6 - 8]25 lectures2h 21m
    • 01Module Introduction [Day 6]1:56 min
    • 02Using the Live Server Extension [Day 6]3:38 min
    • 03The Development Server & The Local Website Address [Day 6]0:00 min
    • 04Understanding Lists [Day 6]5:02 min
    • 05Creating Lists [Day 6]8:01 min
    • 06Understanding Parents, Children, Containers & More [Day 6]8:44 min
    • 07Understanding Cascading, Inheritance & Specificity [Day 6]8:01 min
    • 08Styling the Full Week Page [Day 6]6:20 min
    • 09Introducing the CSS Box Model [Day 7]7:02 min
    • 10Using the CSS Box Model [Day 7]8:50 min
    • 11Creating HTML Layouts [Day 7]7:22 min
    • 12Theory: Selectors & Combinators [Day 7]4:08 min
    • 13Using Selectors & Combinators [Day 7]10:44 min
    • 14Understanding Classes [Day 7]6:22 min
    • 15Block vs Inline Elements [Day 7]8:18 min
    • 16Styling Differences Between Block & Inline Elements [Day 8]9:15 min
    • 17Understanding Margin Collapsing [Day 8]4:42 min
    • 18The "box-shadow" Property [Day 8]6:24 min
    • 19Your Challenge! [Day 8]1:43 min
    • 20Creating the HTML Layout [Day 8]4:28 min
    • 21Styling the Main Section [Day 8]5:38 min
    • 22Styling Images & Working with Negative Margins [Day 8]5:15 min
    • 23Finishing Touches [Day 8]4:08 min
    • 24Module Summary [Day 8]5:39 min
    • 25A List Of All CSS Selectors [Day 8]0:00 min
  • HTML & CSS - Practice & Summary [Days 9 - 10]13 lectures1h 34m
    • 01Module Introduction [Day 9]2:43 min
    • 02Your Task! [Day 9]2:16 min
    • 03Creating the Core Structure [Day 9]11:21 min
    • 04Adding the Header Content [Day 9]3:34 min
    • 05Adding Header Styling [Day 9]12:08 min
    • 06Spacing & the CSS Box Model [Day 9]5:12 min
    • 07Adding the Main Content [Day 9]11:11 min
    • 08Styling the Main Content [Day 10]6:56 min
    • 09Styling List Items & Links [Day 10]16:57 min
    • 10Adding the Footer [Day 10]12:56 min
    • 11Introducing New HTML Elements [Day 10]5:37 min
    • 12Organizing our Files [Day 10]1:58 min
    • 13Module Summary [Day 10]1:22 min
  • Serving a Website (Hosting & Deployment) [Day 11]7 lectures21m
    • 01Module Introduction [Day 11]2:29 min
    • 02What is "Hosting" & "Deployment"? [Day 11]3:15 min
    • 03Hosting a First Static Website (Example Deployment on Netlify) [Day 11]2:23 min
    • 04More Information On Netlify & HTTPS [Day 11]1:57 min
    • 05Adding a Favicon [Day 11]6:16 min
    • 06Relative vs Absolute Paths [Day 11]5:36 min
    • 07Share Your Website! [Day 11]0:00 min
  • Introducing Version Control with Git & GitHub [Days 11- 14]17 lectures2h 59m
    • 01Module Introduction [Day 11]2:19 min
    • 02What are Git & GitHub? [Day 11]6:01 min
    • 03Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]5:24 min
    • 04Optional: MacOS Terminal (z Shell) Crash Course [Day 11]17:59 min
    • 05Optional: Windows Command Prompt (cmd) Crash Course [Day 12]13:09 min
    • 06Git: MacOS Installation [Day 12]4:24 min
    • 07Git: Windows Installation [Day 12]9:20 min
    • 08Understanding the Git Basics [Day 12]4:34 min
    • 09Initializing the Repository & Creating our First Commit [Day 12]18:51 min
    • 10Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]13:10 min
    • 11Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]13:52 min
    • 12Onwards to GitHub - What & Why? [Day 13]4:35 min
    • 13Creating a GitHub Account & a Remote Repository [Day 13]12:25 min
    • 14Understanding the Personal Access Token & "git clone" [Day 14]14:49 min
    • 15Collaborating on Projects - Collaborators & Organizations [Day 14]20:15 min
    • 16Contributing to Projects - Forks & Pull Requests [Day 14]13:32 min
    • 17Wrap Up [Day 14]5:11 min
  • Understanding HTML & CSS Layouts & Positioning [Days 15 - 20]42 lectures4h 9m
    • 01Module Introduction [Day 15]1:22 min
    • 02Project Overview - What we Will Build [Day 15]2:04 min
    • 03Project Setup [Day 15]3:45 min
    • 04Creating the Landing Page Structure [Day 15]5:00 min
    • 05Adding the Page Logo [Day 15]8:21 min
    • 06Adding the Page Navigation [Day 15]4:19 min
    • 07Introducing CSS Flexbox [Day 15]8:45 min
    • 08Aligning Flex Items [Day 15]4:13 min
    • 09Your Flexbox Challenge! [Day 16]3:06 min
    • 10Adding Flexbox to our Project [Day 16]5:37 min
    • 11Adding a Background Image [Day 16]8:44 min
    • 12Creating a Container for the Hero-Content [Day 16]5:20 min
    • 13Positioning Elements [Day 16]6:05 min
    • 14Styling the Hero Content [Day 16]8:39 min
    • 15Understanding Fixed & Absolute Positioning [Day 16]7:55 min
    • 16Working with % Units & Creating a Top Navigation Bar [Day 17]6:58 min
    • 17Finishing the Header [Day 17]8:20 min
    • 18Introducing the "Highlights" Section [Day 17]2:15 min
    • 19Creating the HTML Code [Day 17]10:36 min
    • 20Building the Flex Container [Day 17]6:31 min
    • 21Flex Item Layout [Day 17]5:26 min
    • 22Styling Images with "object-fit" [Day 17]6:07 min
    • 23Styling Text [Day 17]6:24 min
    • 24Understanding Parent - Child Margin Collapsing [Day 18]3:33 min
    • 25Working with CSS Functions - Linear Gradients [Day 18]5:39 min
    • 26The Next Step [Day 18]1:56 min
    • 27Creating a Footer Section [Day 18]3:42 min
    • 28Styling the Footer [Day 18]7:35 min
    • 29Places Page - Overview & Preparations [Day 18]5:12 min
    • 30Creating the Card Content [Day 18]7:03 min
    • 31Using "position: static" [Day 18]7:39 min
    • 32Creating the Card Look [Day 19]3:53 min
    • 33Understanding "overflow" & Your Challenge! [Day 19]6:31 min
    • 34Solving the Challenge [Day 19]11:32 min
    • 35Creating all Cards [Day 19]9:06 min
    • 36The CSS Grid - Theory [Day 19]10:20 min
    • 37Understanding the "nth-type" Selector & "grid-template-columns" [Day 19]6:50 min
    • 38Your Grid Challenge [Day 20]7:13 min
    • 39Working with Unicode UTF-8 [Day 20]4:31 min
    • 40Finishing Touches [Day 20]6:35 min
    • 41Module Summary [Day 20]4:52 min
    • 42Optional: Diving Deeper Into "position", Flexbox & the Grid [Day 20]0:00 min
  • Understanding Responsive Design [Days 20 - 24]25 lectures3h 3m
    • 01Module Introduction [Day 20]2:01 min
    • 02Project Overview [Day 20]4:39 min
    • 03Please Read: Optional Lectures [Day 20]0:00 min
    • 04Optional: Your Challenge - Creating the HTML Structure [Day 20]6:55 min
    • 05Optional: Challenge Solution - The HTML Structure [Day 20]12:57 min
    • 06Optional: Styling the Header [Day 21]14:56 min
    • 07Optional: Styling the "main" Section [Day 21]16:39 min
    • 08What is Responsive Design? [Day 21]5:48 min
    • 09The Problem with Pixels [Day 21]5:45 min
    • 10Introducing "em" & "rem" [Day 21]3:52 min
    • 11Applying "em" & "rem" for the Font Size [Day 22]13:07 min
    • 12Deep Dive: "em" vs "rem" vs "%" [Day 22]9:04 min
    • 13Updating the Project Units [Day 22]10:03 min
    • 14Comparing Desktop & Mobile First Design [Day 22]5:16 min
    • 15Understanding Media Queries [Day 22]8:53 min
    • 16Adding Media Queries to the Project [Day 23]9:20 min
    • 17Your Media Queries Challenge! [Day 23]8:04 min
    • 18Side Drawer & Hamburger Icon - Theory [Day 23]4:16 min
    • 19Creating the Hamburger Button [Day 23]9:54 min
    • 20Creating the Side Drawer [Day 23]12:04 min
    • 21Understanding HTML Fragments [Day 23]5:52 min
    • 22Understanding the Target Selector [Day 24]4:29 min
    • 23Finishing the Side Drawer [Day 24]6:42 min
    • 24Introducing the "z-index" Property [Day 24]0:00 min
    • 25Module Summary [Day 24]3:23 min

And 29 more sections in the full course.

Ready to Get Started?

Choose the option that works best for you.

Single Course

100 Days Of Code: 2024 Web Development Bootcamp

One Payment. Lifetime Access.

$69one-time

  • One-time payment
  • All future updates for this course
  • Downloadable resources & code
  • Certificate of completion
  • Hands-on exercises & projects
  • Self-paced learning
  • English captions on all videos
  • Lifetime access
Buy 100 Days of Code

Single course license

Most Popular

All-Access Membership

Everything we teach. One subscription.

$25/mo

$4,729+ worth of courses

  • Full access to all courses
  • All future courses included
  • Downloadable resources & code
  • Certificates of completion
  • Hands-on exercises & projects
  • Self-paced learning
  • English captions on all videos
  • Cancel anytime
Subscribe Now

61 courses included

30-day money-back guarantee · All prices incl. VAT