Learn web development as an absolute beginner
ฝัง
- เผยแพร่เมื่อ 14 พ.ค. 2024
- 🔥 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 - วิทยาศาสตร์และเทคโนโลยี
I'm 64 years old. Just started learning. Never give up your dreams of working at a startup!
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.
You inspire me 😭
and i'm 18 yo who curses himself everyday for doing nothing
you're motivating
great job, keep your work, chris!
@@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. 🙃
thanks for that advise
Is there a website that just gives you web developer problems to solve?
@@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.
@@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.
@@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!
I'm so glad my video could help you!
If you wasted 30 hours and barely learned anything, then I'd recommend finding a new hobby.
@@ibrahimtech1581 the most stupid advice ever
Yippee! I'm 58 and excited to start something that sounds interesting, not just something to do to earn an income
@@ibrahimtech1581 nothing is easy bro. 😂
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
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!
Wow, that is really awesome!!! Congratulations 🎉
@@TheCoderCoder Thanks! :D
Okay now I'm excited
That's great man, how did it go? Were you an absolute beginner when you started watching?
Nice!!
How do you look and sound so fun yet so professional at the same time..
She's a noob, if you cant even code a website in binary dont even try coding it's not for you.
@@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.
@@BillClinton228 Stop lol, you don't have to program in binary this is a new day and age catch up
@@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?
@@aiyazmostofa1501 yo thanks man!
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
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 😭
The quality of the information and production of this video is so high! I love it !
Thank you so much! A lot of love and hard work went into the making of this video, for sure!
I thought the same thing! I am impressed with the graphics used. Makes a topic that can be dry as hell feel less boring.
@@TheCoderCoder Any courses that you run on the same, may be on your website perhaps..?
Really
100%! I am glad I am not the only one who needed to express this haha
The tone of your voice, pronunciation, and the speed at which you speak is so perfect 👌🏻
Right? every video i see ive to speed up 1.5x. This one is perfect!
I agree.
Agree
+ good video editing. She is super!!!
So True.
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 !
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!
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!
Yes yes I felt the same way. Her voice is very calming and I learned sm from this video
Same here
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 🌙
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
Thank you!
Welcome...
Oh my god ,thank you so much .
Because of people like you I love TH-cam.
@@mridang2064
Thank you
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!
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!!
This video is gold! I will be referring all my beginner students to this. Awesome starting point for web dev
is django easiest rather than laravel?
Dennis Ivy your videos are platinum. hhhh
@@AhmadAli-wt8zy appreciate it :)
@@justlutfi2890 don’t know if it’s easier but I’d recommend it
Lol you are here
WHAT THE HELL. How can someone explain with such elegance? Thank you for this awesome content!!!!!
GREAT teacher, "Coder's Coder!" You bring categories and priorities to everyone teaching their expertise!
Thanks for creating the clearest, most straightforward web development roadmap on TH-cam. 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?
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!
haha thank you! I'm just starting out, 1 million subs would be a dream for sure :)
@@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!
@@Shakeel714 Thanks so much, hopefully someday!
Coder Coder Excellent Job! 👏🏾
Wow! Love the production quality and fast, but complete, flow of information. Finally a beginner's guide worthy of the name
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!!!
One of the most Informative video I have ever watched in my Life.
me too , way better the future is bright
I wish I would have seen these video some years ago
I thought It was all hard until I watched this
I learned so much from a 13min TH-cam clip than I did at school. This was awesome. Made it so easy to understand 👍 thank you.
Awesome! I'm so glad this video helped you :)
Probably from an INDIAN School. Yeah , although o second him there.
@@tempedits9457 I don't live in India nor I'm Indian and I've never been to an Indian school.
@@tempedits9457 BUMMER
@@tempedits9457 ok boomer
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!
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 :)
WOW, such production quality!!! :D
I can't imagine how long this took to edit and put together! :)
Agreed.
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 🤯
Wow me too:D
ME TOOO HAHAHA
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.
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!
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!
Hiii. How has it been?
Any advice for someone who is just starting?
You've inspired me to continue my dream of becoming a web designer and developer.
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!
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
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!
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!
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.
I'm glad this video was helpful! Best of luck as you learn coding 😁
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.
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 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 👍🏾
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!
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.
Wow great video! I spent some time on TH-cam and this is the best summary I could find. Concise, clear, accessible, visually appealing. Well done!
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!
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 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 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!
Ey 14 y/o squad
M 15 and m still confused ughh
All: one step at a time! Follow the path outlined.
@@tomrkba4685 Im 13 and started js last year. Good language if your starting to code.
A 14 year old begginer has joined the chat....
Let’s all just appreciate how good is thethe video’s production value and attention to detail-ness ! Apart from precise information !
Awesome Job !!
This is an excellent roadmap / intro to webdevelopment. CoderCoder's videos are very well produced . One of my favourite TH-camrs on coding 😁👍🏻 10 / 10
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
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.
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.
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!
This is the quality content I was looking for on TH-cam. Great work gal!
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 front end back end and full stack diagram is gold🙌
Thank you 🙏
gotta appreciate the quality and content of this video ! I thank you on behalf of the whole internet...
As a Full Stack Developer in the industry for some years now, I can definitely vouch for your content. Short, crisp and high-quality.
I love how you explain these things ❤ so clean and sooooo generous! ❤
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
it doesn't matter how much I learn in web development and programming in general, I always feel like I'm behind everyone
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!
This is actually one of the best videos I’ve ever watched
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 TH-cam that I've ever seen. Thank you.
Hey. How has it been?
Any advice for a newbie😢
I'm so much in love with the visual aspect of this video!
You’re amazing! Thank you for this insightful roadmap.🙌🏽
I am 21 years old and am gonna be programming and this video is my first step ✅✅♥️ thanks
What is your progress so far?
Same Here!
@@framequality5341 were are you from?
I start a course on Monday, and nervous af
Me too .same lol😂😂 am also 21 dude
This is the best TH-cam content I've come across. So well detailed and packed full. Thanks from Nigeria .
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 deserves a million views and subs. Thank you for this info. I'm starting from scratch, and this has been a massive help!
Thanks for your kind words! Best of luck in learning :)
The contents and presentation were absolutely amazing! Will check out the resources provided. Thanks a lot and good luck!
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!
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!
I'm glad youtube recommended me this video. Also, your animations are so satisfying!
I love the way you explained this complex subject and broke it down so that it’s easier to understand - thank you 🙏 🇿🇦
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
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?
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)
Could you mention your husband profile / name so that we can follow him as well?
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.
this was by far the best explanation i've watched on youtube. Appreciate the breakdown
omg that was amazing. you did the impossible, combined entertainment with learning/education.
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!
Thank you - I've been searching for this information like this for. years. plus you made it very enjoyable to watch!
Thank you for telling all the steps one by one. Best video on TH-cam in my opinion. Also best edited thanks to the editor
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
I saw a lot of tutorials in TH-cam, and I can tell this is the best, it's very understandable and use a basic language that everybody understand. Thanks a lot
This is the best video explaining web dev for a beginner that I have seen so far! Thanks a lot!
Thanks for the overview! Very helpful and your production is on point!
I have never learned so much in such short time !!
Thanks to you !!
I was also very confused about where to start , thank you for the video
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!!!
Thanks for this! Took coding classes in high school and have really wanted to pursue it as a career and this was super helpful!
Loved the “IT CROWD” internet reference
Woah, that explanation was lit 🔥!!
Wish you were my tutor in the university.
This is the best simplified version of explanation on web development I came across, really awesome 🤩
Holy heck these are some beautiful animations. I love the visual style of this video. Also, an excellent introduction. Thank you!
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!
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. 😭😭😭
@@seasons1146 yo estoy tomando un curso en azul school tambien soy principiante te lo recomiendo mucho
This is incredibly underrated worthy content. I like the way how your videos are made, the explanation is REALLY impressive and beginner friendly as the purpose of the video is.
I wish you all the best.
Fernando Pineda so true, this is really great quality content
Thank you. That was like an executive summary with a huge document to be looked at afterwards. Thanks so much! Keep going!
You’re amazing! Your tone of voice in présentation is perfect! You made this fairly simple to understand. Thank u