The Roadmap to Web Development (unforgettable)
Published: 2023-11-19 13:18:16

![alex setting on a river side, image created by programming with shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbrofcbdxo2synfpjsto.png)

Once upon a time, in a small town, there lived a young boy named Alex. He loved using the internet and exploring all the amazing websites it had to offer. 

One day, while playing his favorite online game, he had a brilliant idea - he wanted to learn how to create his own website. Little did he know, this idea would lead him on an exciting journey to discover the best way to learn web development.

## 🏭Foundation of Web Development

![alex asking his uncle for advice, image by programming wit shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l6n74n5whd3n9a5d0fk.png)

Alex started his adventure by asking his computer-savvy uncle for advice. His uncle told him that web development was like building a digital playground where people could have fun, just like Alex did when he played his games. He explained that web developers were like the architects and builders of these digital playgrounds. They used special tools and languages to create web pages, just like constructing a treehouse in a backyard.

![Image of alex sitting beside the treehouse, image created by shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yt6padnzwyqc6k403ib.png)

> "Web development is like learning a new language," his uncle said. "It's not as difficult as it may seem at first. Start with the basics, just like when you learn words and sentences in a new language."

### HTML CSS & JavaScript
![Image of alex watching a roadmap of web dev, image created by shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55ybydaip6h0lxy79ozn.png)

Alex listened carefully and decided to follow his uncle's advice. He began by learning `HTML`, which is like the foundation of a web page. HTML is a bit like building blocks, where each block represents a different part of a web page. For example, to create a heading, you use an `HTML` tag like this:

```html
<h1>This is a heading</h1>
```

To make a paragraph, you use another tag:

```html
<p>This is a paragraph.</p>
```

As Alex practiced, he realized that `HTML` was like the blueprint for his website, just like how you plan what your treehouse will look like before you build it.

![Image of Alex building webpages using HTML and CSS, illustration created by Programming with shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6di393258cw84q4p7g3.png)

Next, Alex explored `CSS`, which stands for **_Cascading Style Sheets_**. CSS was like the paint and decorations for his digital playground. It allowed him to make his website colorful and visually appealing. He could change the color of text, add borders to images, and even create cool animations with `CSS`.

Alex used `CSS` to make his headings colorful and his paragraphs fancy, just like painting the treehouse and adding a cool slide to his playground.

![Image of Alex learning javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9v6dpes1d4cxktk7phx.png)


As he grew more confident, Alex delved into `JavaScript`, a dynamic and interactive language. JavaScript was like the magic that brought his website to life. With JavaScript, he could make buttons that changed colors when clicked, create quizzes, and even build games. It was like adding swings and slides to his digital playground, making it more fun and engaging.

## 🤼Learn from others (Community)
![Image of Alex searching for dev community, image created by shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uckaw5kem04xztdjagiy.png)

But Alex knew that learning web development was not just about coding. He also needed to learn from others and get inspired. So, he joined online communities and forums where he could share his ideas, ask questions, and learn from experienced web developers. He was like a young explorer, meeting other adventurers who could guide him on his journey.

## 🏫Free Online Courses
![image of alex making delicious cake, image created by Shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otr99ub1jc0pa3w70vut.png)

One day, as Alex continued to learn and improve his skills, he discovered a hidden treasure - online coding courses and tutorials. These were like secret maps that led him to more knowledge and skills. There were many free resources and paid courses that provided step-by-step guidance on web development. He chose a <u>few courses that matched his level</u> and interests and began to follow along, just like following a recipe to make a delicious cake.

## ⛳Consistency
As the months passed, Alex practiced and experimented, just like a scientist conducting exciting experiments in a lab. 

![Image of alex learning like a scientist, image created by shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72s1kudyzct8fls33s0n.png)

He faced challenges, fixed bugs in his code, and celebrated small victories, just like when he finally reached the top of the climbing wall on his playground.

With determination and a love for learning, Alex gradually became a skilled web developer. He could create amazing web pages, build interactive features, and [share his creations](https://psxid.figma.com/pq1612tcamkx) with the world. Just like a proud builder showing off his finished treehouse, Alex could showcase his digital playground for everyone to enjoy.

![Image of Alex becoming a skilled web developer, image created by shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlg4p7tepwl2ql2akbgn.png)

## 🍡Figma & Notion AI
The majority (60% or more) of UI/UX designers use [Figma](https://psxid.figma.com/pq1612tcamkx) to transfer web designs. Given this tendency, front-end web developers need to familiarize themselves with Figma to work with designers. If you don't know how to work with Figma Design, you will fall behind in modern coding projects, leading to unproductive website building, and you will have to learn it in the future. So [sign up now](https://psxid.figma.com/pq1612tcamkx) and play around with it before your colleagues or boss blame you. 👇

![Figma Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12oebiywuvtw77nr96cu.png)

**🎯Recommendation:** Use Notion AI to maximize your productivity

[Notion AI](https://affiliate.notion.so/ilucqi7ku9bg-4y5a7) is a fantastic tool for developers! It supports syntax highlighting for over 60 programming languages, making coding easier and more efficient. Not only that, but it also offers some handy features for taking notes. Plus, it's compatible with multiple platforms, allows you to share your notes publicly, and facilitates private collaboration.

## 😎Conclusion
So, if you're a curious like Alex, or if you're simply interested in learning web development, remember to start with the basics, explore HTML, CSS, and JavaScript, join online communities, and use online courses and tutorials. With dedication and practice, you can become a web development wizard, just like Alex, and create your very own digital adventures for others to enjoy. Happy coding!

**_You can watch this whole animated video regarding to this article:_**

{% youtube https://youtu.be/CJ5StzFGG98 %}