Learn web development as an absolute beginner
Ғылым және технология
🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, and JS: 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
Пікірлер: 3 600
I'm 64 years old. Just started learning. Never give up your dreams of working at a startup!
@jossefgutierrez2517
3 жыл бұрын
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
3 жыл бұрын
You inspire me 😭
@medd2588
3 жыл бұрын
and i'm 18 yo who curses himself everyday for doing nothing you're motivating
@zettavevo
3 жыл бұрын
great job, keep your work, chris!
@serena4676
3 жыл бұрын
@@medd2588 im 17 how are you starting bc im sooo lost
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
3 жыл бұрын
thanks for that advise
@VandalVortex
3 жыл бұрын
Is there a website that just gives you web developer problems to solve?
@kurniawanpratama6413
3 жыл бұрын
@@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
3 жыл бұрын
@@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
3 жыл бұрын
@@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!
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
2 жыл бұрын
I'm so glad my video could help you!
@ibrahimtech1581
2 жыл бұрын
If you wasted 30 hours and barely learned anything, then I'd recommend finding a new hobby.
@thedmitryguy
2 жыл бұрын
@@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
@Psychogamer_i
Жыл бұрын
@@ibrahimtech1581 nothing is easy bro. 😂
Wow! Love the production quality and fast, but complete, flow of information. Finally a beginner's guide worthy of the name
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
2 жыл бұрын
Wow, that is really awesome!!! Congratulations 🎉
@masoudmdarvishvand5525
2 жыл бұрын
@@TheCoderCoder Thanks! :D
@kalkidanelias1189
2 жыл бұрын
Okay now I'm excited
@Mwtorres89
2 жыл бұрын
That's great man, how did it go? Were you an absolute beginner when you started watching?
@dkncd
2 жыл бұрын
Nice!!
The quality of the information and production of this video is so high! I love it !
@TheCoderCoder
4 жыл бұрын
Thank you so much! A lot of love and hard work went into the making of this video, for sure!
@claudettebentley
3 жыл бұрын
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
3 жыл бұрын
@@TheCoderCoder Any courses that you run on the same, may be on your website perhaps..?
@danielalencar4491
3 жыл бұрын
Really
@basurabasura
3 жыл бұрын
100%! I am glad I am not the only one who needed to express this haha
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 😭
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 :)
How do you look and sound so fun yet so professional at the same time..
@BillClinton228
3 жыл бұрын
She's a noob, if you cant even code a website in binary dont even try coding it's not for you.
@aboutthebook5275
3 жыл бұрын
@@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
3 жыл бұрын
@@BillClinton228 Stop lol, you don't have to program in binary this is a new day and age catch up
@aiyazmostofa1501
3 жыл бұрын
@@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
3 жыл бұрын
@@aiyazmostofa1501 yo thanks man!
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
3 жыл бұрын
Thank you!
@forhadrh
3 жыл бұрын
Welcome...
@mridang2064
3 жыл бұрын
Oh my god ,thank you so much . Because of people like you I love KZread.
3 жыл бұрын
@@mridang2064
@mjalloh631
3 жыл бұрын
Thank you
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!
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 !
The tone of your voice, pronunciation, and the speed at which you speak is so perfect 👌🏻
@OSRStips
3 жыл бұрын
Right? every video i see ive to speed up 1.5x. This one is perfect!
@julietmoraa5106
3 жыл бұрын
I agree.
@thewanderingvirtualassistant
3 жыл бұрын
Agree
@owfuldev
2 жыл бұрын
+ good video editing. She is super!!!
@harshkr007
2 жыл бұрын
So True.
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
2 жыл бұрын
Yes yes I felt the same way. Her voice is very calming and I learned sm from this video
@annandas.5100
2 жыл бұрын
Same here
@theory6366
2 жыл бұрын
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 🌙
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
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
WHAT THE HELL. How can someone explain with such elegance? Thank you for this awesome content!!!!!
This video is gold! I will be referring all my beginner students to this. Awesome starting point for web dev
@justlutfi2890
3 жыл бұрын
is django easiest rather than laravel?
@AhmadAli-wt8zy
3 жыл бұрын
Dennis Ivy your videos are platinum. hhhh
@DennisIvy
3 жыл бұрын
@@AhmadAli-wt8zy appreciate it :)
@DennisIvy
3 жыл бұрын
@@justlutfi2890 don’t know if it’s easier but I’d recommend it
@vedantkanoujia
3 жыл бұрын
Lol you are here
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!
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.
The editing in this video is so high quality, it blew my mind!
Mind blown, loved it. How come you don't have a million subs now!
@TheCoderCoder
4 жыл бұрын
haha thank you! I'm just starting out, 1 million subs would be a dream for sure :)
@Shakeel714
4 жыл бұрын
@@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
4 жыл бұрын
@@Shakeel714 Thanks so much, hopefully someday!
@kadijaleno
3 жыл бұрын
Coder Coder Excellent Job! 👏🏾
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!!!
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!
One of the most Informative video I have ever watched in my Life.
@CHRISM-TV
3 жыл бұрын
me too , way better the future is bright
@fuentestorresfranciscojavi4060
3 жыл бұрын
I wish I would have seen these video some years ago
@juniortwala6363
3 жыл бұрын
I thought It was all hard until I watched this
I learned so much from a 13min KZread clip than I did at school. This was awesome. Made it so easy to understand 👍 thank you.
@TheCoderCoder
4 жыл бұрын
Awesome! I'm so glad this video helped you :)
@tempedits9457
3 жыл бұрын
Probably from an INDIAN School. Yeah , although o second him there.
@sikandar.b
3 жыл бұрын
@@tempedits9457 I don't live in India nor I'm Indian and I've never been to an Indian school.
@prathamyadav3105
3 жыл бұрын
@@tempedits9457 BUMMER
@marganirohith3718
3 жыл бұрын
@@tempedits9457 ok boomer
Wow great video! I spent some time on KZread and this is the best summary I could find. Concise, clear, accessible, visually appealing. Well done!
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.
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
3 жыл бұрын
Ey 14 y/o squad
@creampuff11
3 жыл бұрын
M 15 and m still confused ughh
@tomrkba4685
3 жыл бұрын
All: one step at a time! Follow the path outlined.
@ibrahimkhawar
3 жыл бұрын
@@tomrkba4685 Im 13 and started js last year. Good language if your starting to code.
@raoulkhaleb7258
3 жыл бұрын
A 14 year old begginer has joined the chat....
WOW, such production quality!!! :D I can't imagine how long this took to edit and put together! :)
@rafalpotasz
4 жыл бұрын
Agreed.
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
This is an excellent roadmap / intro to webdevelopment. CoderCoder's videos are very well produced . One of my favourite KZreadrs on coding 😁👍🏻 10 / 10
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
3 жыл бұрын
Wow me too:D
@afshanshabnam
3 жыл бұрын
ME TOOO HAHAHA
@ilasilas3261
2 жыл бұрын
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.
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
3 жыл бұрын
I'm glad this video was helpful! Best of luck as you learn coding 😁
This is the best video explaining web dev for a beginner that I have seen so far! Thanks a lot!
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.
I love how you explain these things ❤ so clean and sooooo generous! ❤
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!
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!
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!
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!
This is the quality content I was looking for on KZread. Great work gal!
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!
GREAT teacher, "Coder's Coder!" You bring categories and priorities to everyone teaching their expertise!
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!
That was absolutely brilliant! The way you presented it was phenomenal! Don't even get me started on all the animations...Great job!
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!!
Thank you - I've been searching for this information like this for. years. plus you made it very enjoyable to watch!
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!
You’re amazing! Thank you for this insightful roadmap.🙌🏽
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
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!
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!
Girl I really hope you’re doing your best in life! Thanks for this very informative video hope to see more videos like this.❤️
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!
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!
The contents and presentation were absolutely amazing! Will check out the resources provided. Thanks a lot and good luck!
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
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.
Let’s all just appreciate how good is thethe video’s production value and attention to detail-ness ! Apart from precise information ! Awesome Job !!
I'm glad youtube recommended me this video. Also, your animations are so satisfying!
This is the best KZread content I've come across. So well detailed and packed full. Thanks from Nigeria .
i'm only 2 minutes in but i already feel like you're answering all my questions and my mind is not blowing up so thank you so muuuch !!!!
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.
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!
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!
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!!!
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 👍🏾
omg that was amazing. you did the impossible, combined entertainment with learning/education.
Wow thank you so much for making this video! I started learning web development from a month ago and still confused and overwhelming because so much thing to learn. I'm so grateful for watching this and helped me a lot!!!
Wow thank you so much. i looked sooo long for a good video that can help me learn and yk? ur the best Coder Coder ty.
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
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!
gotta appreciate the quality and content of this video ! I thank you on behalf of the whole internet...
You've inspired me to continue my dream of becoming a web designer and developer.
As a Full Stack Developer in the industry for some years now, I can definitely vouch for your content. Short, crisp and high-quality.
What an AMAZING presentation. As a IT recruiter and new to this tech world, I just want to thank you. What a class!
thank u so much for this video, as a guy whos been learning how to code for months with no idea what to do with it or anything, this helped me understand what is really going on in web development
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!
This is actually one of the best videos I’ve ever watched
Thank you for telling all the steps one by one. Best video on KZread in my opinion. Also best edited thanks to the editor
Thanks for this! Took coding classes in high school and have really wanted to pursue it as a career and this was super helpful!
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
4 жыл бұрын
Thanks for your kind words! Best of luck in learning :)
Thanks for making such a comprehensive video about Web Development. As a person who has just got interested to learn the skill, your video has given me a proper insight into the field. Go ahead!
Now I'm so very excited to start learning web development by following the web development roadmap, this video is very informative for everyone who wants to learn web development and there's also a lot of information about web development roadmap which basically you don't have to look for more advanced information about web development, So I'm so thankful to Coder Coder channel for making this video which absolutely she explained more clearly for every single steps and also I've learned everything about all the basic web development skills. I hope you make more videos like this to help other web developer beginner learners.
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
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
4 жыл бұрын
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
4 жыл бұрын
Could you mention your husband profile / name so that we can follow him as well?
Thanks for the overview! Very helpful and your production is on point!
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 KZread that I've ever seen. Thank you.
@oyinlolablessing1189
Жыл бұрын
Hey. How has it been? Any advice for a newbie😢
I have never learned so much in such short time !! Thanks to you !!
this was by far the best explanation i've watched on youtube. Appreciate the breakdown
You’re amazing! Your tone of voice in présentation is perfect! You made this fairly simple to understand. Thank u
Thanks for creating the clearest, most straightforward web development roadmap on KZread. 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?
I was also very confused about where to start , thank you for the video
You just make sense! Thanks so much for posting this video!
That front end back end and full stack diagram is gold🙌 Thank you 🙏
This video is invaluable, pure gold for all of us who are just getting started. Thanks a lot ✌🏻 😊
Woah, that explanation was lit 🔥!! Wish you were my tutor in the university.
I love the way you explained this complex subject and broke it down so that it’s easier to understand - thank you 🙏 🇿🇦
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!