BlueDash Logo

Web Development
for Absolute Beginners

Subscribe to get the learning path. 100% Free.

You'll also be invited to join the community – also completely free.

Awesome, the email is on its way!
Oops! That didn't work. Please try again, or reach out through chat.

Free, Curated Learning Resources

Free tutorials, videos and articles handpicked for you.

1 Preparation

Wood Chopping Animation

Mindset

Set your expectations, and start to think like a programmer from day one.
(7 topics, 9 resources)

Learning Resources

Familiarise yourself with resources that will help you become a better developer over time.
(12 resources)

2 Foundation

Wood Chopping Animation

Understand the Web

You'd be surprised how much you don't understand about the web. I was.
(3 topics, 6 resources)

What Is Web Development, Really?

What do web developers do, and what are the different types of web developers out there?
(2 topics, 5 resources)

3 Developer Tools

Wood Chopping Animation

Code Editors

A code editor is where you write your code. Just like Microsoft Word or Apple's Pages app let you create and edit documents, a code editor lets you write code. Let's pick one.
(5 recommended editors)

Chrome DevTools

Google Chrome is arguably the most popular browser amongst developers, particularly because of its amazing suite of tools specifically designed to aid web development.
(1 resource + 1 exercise)

4 Introduction to HTML

Wood Chopping Animation

HTML is a "markup" language that defines the content and logical structure of a webpage. It is the first language of the web, and here you'll learn all about it – well, almost.
(5 resources]

5 Introduction to CSS

Wood Chopping Animation

Adding CSS to a plain HTML site is like adding paint and decor to an empty room. Empty rooms are boring, and so are plain websites. Learn how to make things look pretty.
(6 resources]

6 Introduction to JavaScript

Wood Chopping Animation

We use JavaScript to make websites do magic stuff when people interact with them. It's like wiring up a light switch. Who'd want a light switch that doesn't function? Let's make things actually work!
(3 resources]

7 Document Object Model

Wood Chopping Animation

Understanding the DOM

The DOM stands for Document Object Model, and it basically means the HTML structure of a webpage, as understood by the browser. With JavaScript, we can actually change things on the fly. As an example, Imagine a webpage where the content would only display for 2 seconds before they disappeared before your eyes! OK, please don't troll your users, but you can do good too!
(3 resources]

8 Foundation for Future

Wood Chopping Animation

Code Quality

Learn what it takes to write high quality code and create delightful websites.
(3 topics, 4 resources]

Version Control

Where do you keep your code? How do you keep track of what's changed? And how do you collaborate with other people without constantly stepping on each other's toes? Here's your answer.
(3 topics, 10 resources]

Web Accessibility

Web accessibility is about making websites accessible to anyone and everyone, regardless of their limitations, which may be technical, such as a slow Internet connection, or more personal limitations such as physical, visual, and hearing impairments.
(2 topics, 4 resources]

9 Challenges

There's nothing like practice for learning how to code. If you haven't already started putting things into practice, there's no escaping now!

Wood Chopping Animation

HTML + CSS

Replicate the Twitter login page

JavaScript

Write a JavaScript function that takes an amount in cents, and tells us which coins, and how many of them we need to make up that amount.

HTML + CSS + JavaScript + DOM

Let's turn the function you wrote in the previous challenge into a visual web app. Developers often work with designers in their team in order to create websites and apps that are both visually appealing, and usable. So, for this challenge, you'll have access to design assets created by Diana Padrón.

? What Next?

Wood Chopping Animation

At this point you have a strong foundation in web development. But, this is just the beginning, and I'd love to help you figure out what to do next!

So, whether you have some feedback about this learning path that you'd like to share, or you're looking for help deciding where to go next, please do reach out to me over on LinkedIn, or by email at merott@bluedash.co.

Get the complete learning path in your inbox. 100% Free.

Awesome, the email is on its way!
Oops! That didn't work. Please try again, or reach out through chat.

The Community

Learning on your own is tough. We're social creatures, and we learn best together.

smiling face with sunglasses

Meet other learners

You're not alone. Connect with other learners who are on the same path.

face with raised eyebrows

Stay accountable

Beat procrastination and stay accountable through your peers.

determined face

Beat challenges

Find help and ask for feedback to overcome the toughest challenges.

Get the learning path. Join the community. 100% Free.

Awesome, the email is on its way!
Oops! That didn't work. Please try again, or reach out through chat.

About Me

Merott Movahedi's Photo

Merott Movahedi

I'm a freelance web developer, working with awesome people and clients via Toptal – an elite networks of top developers, designers, and finance experts in the world.

“I believe that learning is a lifelong journey, and through BlueDash, I hope to make that journey as exciting as possible.”