DEV Community

Cover image for Best Way to Learn Web Development
Programming with Shahan
Programming with Shahan

Posted on • Updated on

Best Way to Learn Web Development

alex setting on a river side, image created by programming with shahan

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

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

"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

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:

<h1>This is a heading</h1>
Enter fullscreen mode Exit fullscreen mode

To make a paragraph, you use another tag:

<p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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 few courses that matched his level and interests and began to follow along, just like following a recipe to make a delicious cake.


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

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 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

🍡Figma & Notion AI

Figma is a fantastic tool for developers. The majority of designers use Figma to transfer web and mobile app blueprints. Given this tendency, web and mobile developers need to familiarize themselves with Figma to work with UI/UX 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 and play around with it before your colleagues or boss blame you. 👇

Figma Design

🎯Recommendation: Use Notion AI to maximize your productivity

Notion AI is also a super efficient and productive 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.


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.

Comment below your thoughts. It might help someone in the world.

Happy coding!

You can watch this whole animated video regarding to this article:

Sponsor: Sanebox - $25 Coupon!

Sanebox sign up image

Sanebox is a fantastic tool that helps you take control of your email. It organizes your email by sorting unimportant emails away from your inbox. It does this by creating a folder on your email account called "SaneLater". All emails that are deemed not important are automatically filtered to this folder.

My Socials: Linkedin | X

Stay tuned for more valuable content, and if you find it helpful, you may also like my YouTube channel. Until next time, happy coding!

Buy Me a Coffee

Top comments (5)

manoj_0076 profile image

Alex journey was amazing 😍
Thanks for sharing.
Hey Shahan, Currently I'm doing MCA and I wanted to become a full stack developer like Alex.😐
But I'm not consistent learning.
Because college Attendance, curriculum , chill with Friends and more...
After learning some features and methods then I want to move next but whatever I leaned, I forgot it.

How to do continuous learning
,Consistent on 📖

codewithshahan profile image
Programming with Shahan

Hey Manoj, I am glad that it helped you!

I suggest you build projects, not just learn by reading or watching tutorials, so you won't forget. You don't need to spend the whole day building projects; just 2 hours a day would be enough for you, and I know it is pretty much possible after doing all your other daily tasks if you have the courage to continue learning. Never give up. If you can't spend 2 hours a day, try to spend 30 minutes or 60 minutes a day, and then increase your time, say, by +5/10 minutes the next day, and so on. Keep in mind that you don't need to complete a project, chapter, or tutorial. Otherwise, you can't stay on track consistently because finishing a project or tutorial can take more than 30/60/2 hours, and you will lose your discipline to learn to code every day. So make sure to stick with the 2-hour-a-day rule.

You can also challenge yourself with your friends or family members by saying that you're going to spend two hours a day learning to code. If you fail to do it, at least it will give you a sense of guilt or shame because you're not doing what you say.

I also suggest reading this article for a better learning experience:  

Good luck on your full-stack development journey!

manoj_0076 profile image

I was making the same mistake watching tutorials on YouTube.
and following them.
Thank you very much😊 I will do it and focus on building project own, challenge myself.

Thread Thread
codewithshahan profile image
Programming with Shahan

Great. Never forget to build projects.

generator_garimu profile image
Garimu Alonso

The best way to learn anything is active development, and yeah your article is 🔥