Learn web development as an absolute beginner

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/?u...
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
Want to learn to code? This video will cover a roadmap for beginners, with all the basic web development skills you will need to know.
00:00 Intro
00:50 What is Web Development
01:05 How Websites Work
01:37 Front-End And Back-End
02:43 Code Editor
03:27 Basic Front-End
03:39 HTML
04:13 CSS
04:43 JavaScript
05:02 Tools
05:12 Package Manager
05:51 Build Tools
06:34 Version Control
07:13 Additional Front-End
07:31 Sass
07:56 Responsive Design
08:33 JavaScript Frameworks
10:00 Basic Back-End
10:11 Server
11:08 Programming Language
11:33 Database
_____________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

[@fukutube4evr]

I'm 64 years old. Just started learning. Never give up your dreams of working at a startup!

[@jossefgutierrez2517]

I am almost 40 and also starting now. Never give up your dreams! Keep going strong Chris. I love this video. I can not add anything to what the rest of the people are saying.

[@imfrustrated8339]

You inspire me 😭

[@medd2588]

and i'm 18 yo who curses himself everyday for doing nothing you're motivating

[@zettavevo]

great job, keep your work, chris!

[@serena4676]

@@medd2588 im 17 how are you starting bc im sooo lost

[@doyoufeelthemusic]

As someone who's done programming and web development for 15 years: This is an excellent summary. Good luck to everyone who is just starting! A small tip from me: web development can be very rewarding, but also quite frustrating sometimes. If you find yourself stuck (it's normal, and happens to everyone!), take a step back, go outside, meet a friend for coffee, have a glass of wine/orange juice, or do whatever else to clear your head. 🙃

[@respectknuckles428]

thanks for that advise

[@VandalVortex]

Is there a website that just gives you web developer problems to solve?

[@kurniawanpratama6413]

@@VandalVortex No, why? You can always challenge yourself by adding new features you have never build before to your web apps. Or you can ask people around you if they need a web app, if they do try to analyze their needs and what kind of features they expect. I'm not sure with the others but that's how i learned a lot of things in Web Development, working on a real world project is always the best learning method.

[@VandalVortex]

@@kurniawanpratama6413 Thanks for the reply. Why? I like having different options when it comes to learning. I'm not sure what the issue is. I'm asking for a website for real world web developer problems to solve so it's easier to understand what is expected of me in that work environment. Personally, I would like having images/video clips of designs or features in a list. And then those pictures/video clips would be annotated with "build this in xxx" or "Improve this". Sounds like something I would make if I had enough experience.

[@kurniawanpratama6413]

@@VandalVortex Try to take an internship program in a company, i would recommend applying to a startup company, you can learn a lot of things from there. Good luck!

[@lastnavytutorials2401]

I have watched a combined total of 25-30 hours in web dev tutorials. Helping with maybe 10% of what I actually wanted. You somehow managed to answer questions I hadn't even been looking for while also filling the remainding 90% I needed covered. Thank you!

[@TheCoderCoder]

I'm so glad my video could help you!

[@ibrahimtech1581]

If you wasted 30 hours and barely learned anything, then I'd recommend finding a new hobby.

[@thedmitryguy]

@@ibrahimtech1581 the most stupid advice ever

[@brookstravelstheworld2328]

Yippee! I'm 58 and excited to start something that sounds interesting, not just something to do to earn an income

[@psychobrawlstarsind]

@@ibrahimtech1581 nothing is easy bro. 😂

[@7thechosen1]

This is probably the best video I've seen about this subject. The step-by-step roadmap is such a big help for me and other aspiring self-taught developers that have no lesson plan available. Than you so much for this AMAZING content!!

[@masoudmdarvishvand5525]

10 months ago I watched this awesome road map and started learning web development step by step. In 2 days I have my first interview for a full-stack MERN junior web developer. I just wanted to thank you!

[@TheCoderCoder]

Wow, that is really awesome!!! Congratulations 🎉

[@masoudmdarvishvand5525]

@@TheCoderCoder Thanks! :D

[@kalkidanelias1189]

Okay now I'm excited

[@Mwtorres89]

That's great man, how did it go? Were you an absolute beginner when you started watching?

[@dkncd]

Nice!!

[@zeath_zolaries3508]

How do you look and sound so fun yet so professional at the same time..

[@BillClinton228]

She's a noob, if you cant even code a website in binary dont even try coding it's not for you.

[@aboutthebook5275]

@@BillClinton228 lol r u out of mind sir! U don't have u show everyone that u can do it using binary. No one care.

[@goodppl9401]

@@BillClinton228 Stop lol, you don't have to program in binary this is a new day and age catch up

[@aiyazmostofa1501]

@@goodppl9401 Yo has a point, if you can't harvest your own silicon and make a CPU from scratch, can you call yourself computer-literate?

[@goodppl9401]

@@aiyazmostofa1501 yo thanks man!

[@teodorpeev1444]

It's so rare to see such a simple and easy-to-understand, yet packed full of important and useful information tutorial, not only connected to programming, but pretty much anything. Coder Coder, I thank you from the bottom of my heart for this short, yet very useful tutorial!

[@elid.3945]

I'm just starting to seriously look into web development as a potential career and this video was so clear and helpful. The graphics, layout, similes, metaphors, and every other teaching technique used were very well executed as well! Cheers!

[@rubenramirez1109]

The quality of the information and production of this video is so high! I love it !

[@TheCoderCoder]

Thank you so much! A lot of love and hard work went into the making of this video, for sure!

[@claudettebentley]

I thought the same thing! I am impressed with the graphics used. Makes a topic that can be dry as hell feel less boring.

[@hiteshwaghnani1697]

@@TheCoderCoder Any courses that you run on the same, may be on your website perhaps..?

[@danielalencar4491]

Really

[@basurabasura]

100%! I am glad I am not the only one who needed to express this haha

[@entrubia]

Here is my way to "THANK YOU!" 00:00 Intro 00:50 What is Web Development 01:05 How Websites Work 01:37 Front-End And Back-End 02:43 Code Editor 03:27 Basic Front-End 03:39 HTML 04:13 CSS 04:43 JavaScript 05:02 Tools 05:12 Package Manager 05:51 Build Tools 06:34 Version Control 07:13 Additional Front-End 07:31 SASS 07:56 Responsive Design 08:33 JavaScript Frameworks 10:00 Basic Back-End 10:11 Server 11:08 Programming Language 11:33 Database

[@TheCoderCoder]

Thank you!

[@forhadrh]

Welcome...

[@mridang2064]

Oh my god ,thank you so much . Because of people like you I love KZbin.

[@entrubia]

@@mridang2064

[@mjalloh631]

Thank you

[@highway2heaven91]

Thanks for creating the clearest, most straightforward web development roadmap on KZbin. Just wondering, if you’ve already learned HTML, CSS, JavaScript and JQuery how long does it take to learn the rest of the front-end steps?

[@maoi3887]

This channel is amazing!!! The animations, the info, the way that you speak, everything is just perfect. I am so grateful for this, definitely sharing 'em to my friends

[@JosueChamorro]

The tone of your voice, pronunciation, and the speed at which you speak is so perfect 👌🏻

[@OSRStips]

Right? every video i see ive to speed up 1.5x. This one is perfect!

[@julietmoraa5106]

I agree.

[@thewanderingvirtualassistant]

Agree

[@owfuldev]

+ good video editing. She is super!!!

[@harshkr007]

So True.

[@nonamonsod]

I usually get discouraged when I listen to someone teach me something that I can't make sense of, but something about you makes it exciting to learn. I think it's your voice. It's calming, doesn't make me feel dumb, and makes me feel hopeful without being "too good to be true" too much if that makes sense. Thank you!

[@rrrrrr7041]

Yes yes I felt the same way. Her voice is very calming and I learned sm from this video

[@annandas.5100]

Same here

[@theory6366]

I am in the same boat as you when it comes to the feelings. We can’t give up! The world is changing and everyone has a way to accomplish what they want in their own way. We got this 🌙

[@emileharel4595]

Great voice over, well structured info and great animations on top of that. Thoroughly impressed. If you ever create a course on skills skillshare or whatever, let us know

[@kayyykay]

Everything about this video is literally perfect! The BEST video I have come across while researching this to date! The production, the editing, the graphics, the explanations, everything 😭

[@saaddhillxn]

WHAT THE HELL. How can someone explain with such elegance? Thank you for this awesome content!!!!!

[@DennisIvy]

This video is gold! I will be referring all my beginner students to this. Awesome starting point for web dev

[@justlutfi2890]

is django easiest rather than laravel?

[@AhmadAli-wt8zy]

Dennis Ivy your videos are platinum. hhhh

[@DennisIvy]

@@AhmadAli-wt8zy appreciate it :)

[@DennisIvy]

@@justlutfi2890 don’t know if it’s easier but I’d recommend it

[@vedantkanoujia]

Lol you are here

[@JulienPop]

Great video ! It’s very clear and well-built, just what I needed. I’m considering to learn web dev and you definitely helped me understand what’s at stake and what I need to learn. Thank you again !

[@christian2085]

GREAT teacher, "Coder's Coder!" You bring categories and priorities to everyone teaching their expertise!

[@beterax]

The editing in this video is so high quality, it blew my mind!

[@shahzadaalihassan_raw]

Mind blown, loved it. How come you don't have a million subs now!

[@TheCoderCoder]

haha thank you! I'm just starting out, 1 million subs would be a dream for sure :)

[@Shakeel714]

@@TheCoderCoder ma'm, I can bet that you are definitely going to reach the million subscribers milestone very soon given the quality of your content which is quite the best among all others out there on the internet!

[@TheCoderCoder]

@@Shakeel714 Thanks so much, hopefully someday!

[@kadijaleno]

Coder Coder Excellent Job! 👏🏾

[@CriscOnSmootH]

3 minutes into your video and I must say, you are the first one to make ANY sense from all the begginer videos I've seen. The other videos seem to presume you already know terms like front/backend and full stack. Thank you VERY much for this extremely well done and informative video!

[@haleyg1661]

I know i'm technically late but this video is criminally under-viewed!!! thank you so much for breaking all of the learning steps down into a less intimidating explanation :) I'm very excited to pursue a career in Web Development

[@raghavkamath]

One of the most Informative video I have ever watched in my Life.

[@CHRISM-TV]

me too , way better the future is bright

[@fuentestorresfranciscojavi4060]

I wish I would have seen these video some years ago

[@juniortwala6363]

I thought It was all hard until I watched this

[@vladimir_dev]

WOW, such production quality!!! :D I can't imagine how long this took to edit and put together! :)

[@rafalpotasz]

Agreed.

[@ImKayori]

I just found your page and I must say. I really look up to you. Thank you for taking the time to help us. You've been such a blessing.

[@adamkall3550]

Wow! Love the production quality and fast, but complete, flow of information. Finally a beginner's guide worthy of the name

[@sikandar.b]

I learned so much from a 13min KZbin clip than I did at school. This was awesome. Made it so easy to understand 👍 thank you.

[@TheCoderCoder]

Awesome! I'm so glad this video helped you :)

[@tempedits9457]

Probably from an INDIAN School. Yeah , although o second him there.

[@sikandar.b]

@@tempedits9457 I don't live in India nor I'm Indian and I've never been to an Indian school.

[@prathamyadav3105]

@@tempedits9457 BUMMER

[@marganirohith3718]

@@tempedits9457 ok boomer

[@stachowi]

Damn this is good, as a web dev for 16 years, this is a great primer with awesome production value. This will put you on the YT map!

[@maanaskauntia8410]

Your content was amazing!!! I also went through all the resources that have been mentioned in the description. Thankyou for providing such great resources. I have been trying to learn web development for a week now. And it has been going good. But all the content shared by you has boosted the process. I just want you to know that you are doing a great job and making really helpful content. Thanks again!!!

[@nataliersutton]

Thank you! I started a Web Dev course but hearing all these different programs and applications had me confused as to the purpose of everything. This really helped me get my head around the basics of the most popular, what they do, etc. Really helpful!

[@oyinlolablessing1189]

Hiii. How has it been? Any advice for someone who is just starting?

[@cmjensen]

Amazing. Thank you so much!! I love this community for this very reason. Once someone learns they reach back to help the next person! I’ll pay it forward.

[@TheCoderCoder]

I'm glad this video was helpful! Best of luck as you learn coding 😁

[@poeman3661]

This video made me learn a lot about myself. I’ve realized I want to become a front end developer. I’ve always had a strong interest in interior design 🤯

[@exoticpash8823]

Wow me too:D

[@afshanshabnam]

ME TOOO HAHAHA

[@ilasilas3261]

You may want to consider being a ui/ux designer in that case. Front end programmers very frequently have no say on the actual design of the website, they get it from a designer and they just implement it.

[@abrahamzahir6649]

I just found your video and I absolutely love your content. I am beginning to start tutorials to learn web development and cannot stress enough how impressed I am with how easily you were able to describe what I thought was very difficult concept. You are an excellent teacher and The quality of your videos are Topshelf. Excellent value in teaching and delivery. Five stars. Subscribing now! Keep up the good work!

[@maibunzy]

This is so helpful! I'm a student and trying to learn more about web coding- This sums up neatly of what I need to focus on!

[@oliviamotevalli9683]

Thank you!!!!!! Finally, a clear and understandable guide! I have been studying for a few months and whilst aware of these terms, I just didn't get them. You've cleared up so much for me!

[@mohammadikram7831]

This is a lifesaver! You just summed up my entire previous semester which I felt like I almost forgot but now I feel good about myself...Thank you!

[@williamcameron5865]

I'm just getting into learning to code and this was very helpful. However, as a current teacher, this is about as good of a piece of instruction on KZbin that I've ever seen. Thank you.

[@oyinlolablessing1189]

Hey. How has it been? Any advice for a newbie😢

[@theofficialjeffishe]

I love this already, and I just started watching it! I was so nervous about starting these new courses! You've made me feel so much better about it! If I can have something broken down, I can understand it!

[@KayGee_yt]

Thank you for the clarification that when a job asks me to be able to do motion design AND web development, they're asking for two entirely different careers 👍🏾

[@gandres_07]

This deserves a million views and subs. Thank you for this info. I'm starting from scratch, and this has been a massive help!

[@TheCoderCoder]

Thanks for your kind words! Best of luck in learning :)

[@coco-gv4nr]

Girl I really hope you’re doing your best in life! Thanks for this very informative video hope to see more videos like this.❤️

[@raoulkhaleb7258]

You've inspired me to continue my dream of becoming a web designer and developer.

[@maxc9432]

First year CS student here. This video gives me a clearer insight on the whole CS environment and solved a lot of my doubts. Big thanks!

[@ReinhardtStrauss-ip6uw]

This is an excellent roadmap / intro to webdevelopment. CoderCoder's videos are very well produced . One of my favourite KZbinrs on coding 😁👍🏻 10 / 10

[@SIDESH0W]

Easily one of the most informative and useful videos I've seen on how to begin with web dev, I loved the graphic of your road map.

[@anesukafesu7875]

I'm loving the logical structure, the simplicity of explanation and the great illustration of the video. I'll definitely recommend this to anyone looking to start Web Development. I'm impressed. Thank you.

[@ursha007]

That was absolutely brilliant! The way you presented it was phenomenal! Don't even get me started on all the animations...Great job!

[@nicholas.wangari8586]

Listen guys, this is the best introduction to website development ever! Been looking for a tutorial that summarises start-to-end of website development and this is the best! Thanks thanks so so much!

[@uasiva1997]

Let’s all just appreciate how good is thethe video’s production value and attention to detail-ness ! Apart from precise information ! Awesome Job !!

[@FazalKarimsyed]

As a Full Stack Developer in the industry for some years now, I can definitely vouch for your content. Short, crisp and high-quality.

[@uchennagabriel5550]

This is the best KZbin content I've come across. So well detailed and packed full. Thanks from Nigeria .

[@AlisInterrail]

Wow great video! I spent some time on KZbin and this is the best summary I could find. Concise, clear, accessible, visually appealing. Well done!

[@etunde81]

After 10 seconds of watching your video, I subscribed! :))) why? Because this was the most comprehensive, interactive and straight on point video on coding that I've seen in years!

[@HadjiCorpuz]

Thank you for this! I recently became interested in web development after doing some basic html for my current job and I dabbled a little in college. Awesome editing as well!

[@TristenDavenport1]

This was SO incredibly helpful!! Thank you for making content that's clear and to the point that can really get people on the right track!

[@piyushgolait]

This is the quality content I was looking for on KZbin. Great work gal!

[@binhnguyenthanh2191]

Thanks a lot for doing this video, it really helped me crack the general concepts. Not to mention the dedicated illustrations, love your style and all the effort in editing this :)

[@rigeup7844]

gotta appreciate the quality and content of this video ! I thank you on behalf of the whole internet...

[@andrewpaul6251]

This is actually one of the best videos I’ve ever watched

[@ruthannesoverano8678]

I love how you explain these things ❤ so clean and sooooo generous! ❤

[@hrishikeshpednekar1300]

That front end back end and full stack diagram is gold🙌 Thank you 🙏

[@vanessal9334]

Thank you so much for explaining everything that is necessary for us to know. Some ppl just explain html css and js. And then they’re done. I’m definitely following you

[@artempetrenko4216]

OMG Just amazing explanation and even more amazing video editing! As a blogger I understand how much time did you spent to bring us only one part - all that animation. Thank you very much!

[@fatimuzzohra9983]

You've got a new subscriber.. You're just amazing. This is exactly what I was looking for a long time.. Thank you ma'am

[@rixanneh18]

Excellent breakdown! I've been in tech forever, systems programmer and admin, always hated webdev. Its still around so I figured I better get to know it. Learning all these frameworks and wondering why lol and now I know

[@oluwaseunoso528]

I'm so much in love with the visual aspect of this video!

[@leslier2393]

omg that was amazing. you did the impossible, combined entertainment with learning/education.

[@johndavemendoza6134]

I just started in my journey as a Web Developer. Glad that I found this video. It motivates me more. Btw, the editing is beautiful!

[@seasons1146]

Im a total total beginner like i didnt even know it was a thing. I wanna learn it so bad. But i do t understand a thing. 😭😭😭

[@soypaolacode5673]

@@seasons1146 yo estoy tomando un curso en azul school tambien soy principiante te lo recomiendo mucho

[@RomuloSoarespsi]

What an AMAZING presentation. As a IT recruiter and new to this tech world, I just want to thank you. What a class!

[@Shunpall]

This is Genius! This is by far the best layout of the raod to becoming a developer I 've seen thus far. Giving out the structure and suggesting the best approach like commencing with front-end and then progressing from there. Thanks alot!!!

[@reactnoobie7820]

The contents and presentation were absolutely amazing! Will check out the resources provided. Thanks a lot and good luck!

[@jamesrprince]

You’re amazing! Thank you for this insightful roadmap.🙌🏽

[@michaelfranco387]

I love the way you explained this complex subject and broke it down so that it’s easier to understand - thank you 🙏 🇿🇦

[@nicksteadman6823]

I gotta say this was one of the most helpful videos I’ve seen so far. Short and sweet but also a good amount of informations

[@zarrar1825]

I was into coding a lot last year but i didn’t know when or where to start, then i came across this amazing video and I definitely think front end is gonna be fun. Lets hope a 14 year old like me can figure this out!

[@EveseveE]

Ey 14 y/o squad

[@creampuff11]

M 15 and m still confused ughh

[@tomrkba4685]

All: one step at a time! Follow the path outlined.

[@ibrahimkhawar]

@@tomrkba4685 Im 13 and started js last year. Good language if your starting to code.

[@raoulkhaleb7258]

A 14 year old begginer has joined the chat....

[@tobiasgallardomentucci6453]

I saw a lot of tutorials in KZbin, and I can tell this is the best, it's very understandable and use a basic language that everybody understand. Thanks a lot

[@asianpsychopath6969]

Thanks for the guide! out of all the videos I've watched till now, this was the best at actually letting me know what I'm getting into!

[@eyeristhepodcast5731]

this was by far the best explanation i've watched on youtube. Appreciate the breakdown

[@Jonathan.R.Pereira]

@1:13 I like how you referenced the "IT Crowd"

[@hritikdahiya]

Why did she take the internet out and put it in a video ? Doesn't she know that the whole world might fall into chaos ? :O

[@4ourty5ive]

Oh man, didn't even catch that until after watching the whole video through almost lol. Good eye!

[@mohsenqureshi6318]

Thank you so so so much for this amazing video! I seriously never comment on videos, but I had to here. This was so helpful for me to understand what web development really is as I was kinda on the fence whether to pursue it or not. Thanks!

[@NGamingpubg]

Thank you for telling all the steps one by one. Best video on KZbin in my opinion. Also best edited thanks to the editor

[@ayeshashakeel]

This is the best video explaining web dev for a beginner that I have seen so far! Thanks a lot!

[@hritikraj2812]

I'm glad youtube recommended me this video. Also, your animations are so satisfying!

[@sonalithakker6517]

I was also very confused about where to start , thank you for the video

[@KingSoraProductions]

Thank you. That was like an executive summary with a huge document to be looked at afterwards. Thanks so much! Keep going!

[@veenav3927]

This is the best simplified version of explanation on web development I came across, really awesome 🤩

[@amitanveri952]

I have never learned so much in such short time !! Thanks to you !!

[@mohammadthousif3869]

Woah, that explanation was lit 🔥!! Wish you were my tutor in the university.

[@FooBarBash]

Holy heck these are some beautiful animations. I love the visual style of this video. Also, an excellent introduction. Thank you!

[@marlo8456]

This is a fantastic overview...its so simple, yet it's been difficult to find anything as easy to understand and comprehensive as this. Thanks!

[@javascriptmastery]

Amazing video, extraordinary animations, professional voiceover. The overall quality of this video is extremely high. Congrats! How long did it take you to create this?

[@TheCoderCoder]

Thank you so much! Tbh the video took probably a month from start to finish, working on the side (my husband is a professional video editor / animator / creative mind, and I wrote the information for the script)

[@Akshay-ds6zl]

Could you mention your husband profile / name so that we can follow him as well?

[@cocom333]

Great video, it really helped me to understand lots of things, as you said, sometimes we get overwhelmed with information, but this made it understandable! I have a question, which program did you use for the animation?

[@keyoneubanks3577]

this video is exactly what I've been looking for i really want to get into front end and this makes it so much easier thanks so much for making this video, seriously your awesome.

[@American.adventure]

Thank you for making an easy to follow list of what I need to learn.

[@AhsanKhan-es7xg]

Loved the “IT CROWD” internet reference

[@norahmohamed5022]

I am 21 years old and am gonna be programming and this video is my first step ✅✅♥️ thanks

[@blitzzzz9105]

What is your progress so far?

[@framequality5341]

Same Here!

[@norahmohamed5022]

@@framequality5341 were are you from?

[@__Gw]

I start a course on Monday, and nervous af

[@Brian-kj6mq]

Me too .same lol😂😂 am also 21 dude

[@Sarah-tq2jx]

This video is exactly what I needed - clear, concise and simple to understand! So many “beginner” resources are written in jargon. It makes it really hard to get started.

[@seiymournuts]

I was looking for a great intro video to web development to pass to a friend who is interested in this field. Being a full stack web dev myself, this video is EXCELLENT in describing the top down view for someone who has never looked into any of this. Well done!!