This Is Why You Can’t Learn Web Dev

Web Dev Simplified · Beginner ·🌐 Frontend Engineering ·3y ago

Key Takeaways

The video discusses the challenges of learning web development, highlighting the importance of learning fundamentals such as HTML, CSS, and JavaScript, and how to adapt to new technologies and frameworks like React and Next.js.

Full Transcript

okay time to learn web development let me just pull up the Odin project that's what people told me to use and oh my gosh do I really need to know this is huge I can't possibly learn that much let me just look at job postings to see what they actually have listed uh here's one for a junior developer internship unpaid okay that's fine uh 420 years of experience with a language that hasn't even been invented yet what this is so dumb let me just go to YouTube okay here fireship I've heard of this guy he's got a new video on this uh this new framework previous JS just came out and is being adopted by every company out there because it's just like nexjs without server components oh wait another video just popped up let me check that one out previous JS is dead allow me to introduce you to bloatjs a JavaScript framework that loves big bundles and it cannot lie oh my God this is so confusing let me go see what's on Twitter or is it blue sky now wait no no no Mastodon that's what it's called now I think yeah whatever let's just okay let's go oh here's an article a four-year-old baby learns programming in three hours and builds a 30 million dollar Tech startup there's no way I can compete with that I I give up [Music] welcome back to web dev simplified my name is Kyle my job is to simplify the web for you and you may notice I'm not in my normal office this is actually my wife's office we just recently converted it over into a library kind of study for her so I decided I would record a video in here it obviously looks a lot more appealing than my normal office and you may notice she kind of stole my chair so that's like half my you know Decor in my office if you're currently trying to learn web development you know how difficult it is to learn everything that there is out there that you need to know in order to land your first job but you also know that creating websites now is easier than it's ever been I mean you can create a really performant amazing web application with very little experience in actually building websites and this is kind of weird that it's actually gotten much easier to build websites but learning to actually get a job as a web developer has gotten much harder you would think they would either both get easier or both get harder but the reason that it has both gotten easier to make websites and harder to land a job is because there are more and more tools out there that help you with building websites things like react new CSS features new JavaScript features that make building websites much easier than it used to be but now with all those extra tools there's more that you need to learn to actually land your first job so in this video I'm going to kind of break it down into two different sections talking about all the different things that are happening that are changing web development and in the second half of the video I want to talk about how you can actually go ahead and learn web development efficiently kind of give you the path that you need to go down to make sure that you're going to be successful in learning web development because it's much harder than most people give it credit for a lot of people out there they look at web development they kind of dismiss it as like not really software engineering or not software development like oh if you're not building desktop applications or like a back-end developer you're not an actual real developer that couldn't be farther from the truth especially as things have evolved in the web development front end space it's gotten more and more complex and it becomes more and more difficult to learn now if we rewind back to when I was first learning web development this wasn't necessarily like decades ago it was maybe about 10 years ago at this point that I was learning web development things looked so much different than they do now and that's a very short period of time for things to change so much I mean back when I was first learning web development an interview question that you might get asked in like a junior front-end position is how do you Center a div horizontally and vertically now if you're just starting out learning web development you may think that's a ridiculous question that's incredibly easy to do I mean you have flexbox you have grid there's so many ways to do that but when I was learning web development flexbox didn't exist grid didn't exist the number one way that you laid out things on a page was using Floats or more likely you just used bootstrap because that was like the one grid system that everyone used and it kind of revolutionized how websites are built but now 10 years later there's all these new features that make doing those things easier like flexbox and grid like I mentioned so on one front we got more features than things like CSS and also JavaScript has added a ton of new features when I was learning web development there was really no distinction between JavaScript and jQuery you just kind of learned both of them at the same time and that's because JavaScript didn't have as many features as it does now and actually was very difficult to do things with just JavaScript because it didn't have all the nice features of jQuery so you would go ahead you'd learn Js query and you didn't even have to learn JavaScript really I mean I know when I first learned JavaScript I was learning jQuery I didn't even know what JavaScript was I was just like okay I'm learning jQuery and that's what you write websites in like that's how much jQuery was used back when I was first learning about development so yeah jQuery which made certain things a little bit easier and overall it wasn't too hard to grasp because on the front end of websites they weren't doing a lot of stuff I mean some websites were but for the most part if you are working in a more Junior position you probably weren't having to do crazy user interactions there's no single page applications and stuff like that to worry about it's just most of the work is on the back end and then the front end has a little bit of interaction in JavaScript but it's mostly just like small things not super complex now if we fast forward a few years after I just started learning web development some new things start to emerge one of them is jQuery starts to fall out of favor a bit as JavaScript adopts more and more features of jQuery and overall you just don't need it as much because it's easier to write things in JavaScript than ever before CSS adds tons of new features like flexbox grid and just tons of features it's crazy how much just come out in CSS in the last five to ten years but all these new features are getting added in and then on top of that something kind of important happens react comes out and I know there's things before react there was angular there is backbone and stuff like that but react I think was really one of the big catalysts for pushing that component driven development and their own system of doing things was completely different than anything that had come before it at all I mean writing react code was so much different than how you write JavaScript code and that was a huge shift for a lot of people because you went from writing you know imperative JavaScript code the front end doesn't do too much you just push all your data to the server server gives you back information to this idea of you know what let's do everything on the client we're going to shove everything in there and everything's gonna happen on the client and oh by the way it's all declarative and you have to relearn how to write programs that's kind of what it felt like shifting over to react so it was a large hurdle there to jump over to react it wasn't as hard as like learning web development from scratch but it was a pretty big mental shift for a lot of people now the nice thing with a lot of these tools like react angular View backbone and stuff like that is they weren't quite as widespread as they are now and they weren't quite as over arching like they didn't cover absolutely everything you kind of just use them to spruce up your front end a little bit or maybe you decided to write your entire application using these tools but again the front end was still not as complex as it is now you weren't just you weren't doing so much in it but it started to get pushed more and more to the front end with introductions of things like react and the more popular these front-end Frameworks became more and more stuff got pushed to the front end instead of being pushed over to the server so now the front end started getting bloated with more and more and more and more complex stuff until eventually in the last couple years we kind of realized maybe this isn't the right way of doing things you know the server is really good at doing all these things why are we pushing all this down to the client so now there's a bit of a shift in the last few years and even still currently where we're pushing more stuff back over to the server to handle different things that we were originally handling in the server and then switched back to the client and now we're switching it back over to the server again so we're trying to go back to that more server client architecture and with that comes a lot of Frameworks that are built on top of things like react spell View and angular and these are like a full stack framework like next JS is a very good example of one of these now the thing that makes it really difficult is that these different ideologies of okay we're doing everything on the server oh wait now we're doing it on the client oh wait now we're doing it in between both and oh wait now we're changing how we do it between both these changes happen quite quickly I mean there's tons of memes out there that have new JavaScript framework comes out every other day but I also feel like a new ideology of how we actually program between the front end and the back end comes out fairly often I mean it seems like almost every year or two there's a new way of doing things that completely changes what we were doing before so it's really hard because you may be spending time learning something like let's say you're learning JavaScript and you spend about a year learning JavaScript you would feel like you're a really good front-end JavaScript developer and boom now all the jobs are asking for reaction like I just wasted a year learning JavaScript now you're trying to learn react you learn react it takes you like six months boom all the jobs are asking for next.js so you go ahead you earn next.js and like oh by the way next.js just updated to a brand new server-based version so I'm not yet to relearn everything again it feels like you're always one step behind but if you contrast that to when I was learning web development things did not change nearly as quickly I mean they were changing the web always changes but it didn't feel like you're always one step behind trying to catch up it felt like okay I learned this thing and now this thing is going to be around for a long time and I can kind of stick with this and just learn it and I'm gonna be good for a long time it didn't feel like things were changing like they are now so what can you do about this situation I mean it doesn't matter how much you scream into the void things are just going to keep changing and changing at the rate that they are and maybe even quicker so how can you keep up with these changes and make sure the skills that you're learning now are going to be useful in the future the very first thing that I recommend and I recommend this to anyone that's learning a programming not just web development but just focus on learning the fundamentals first if we go back and we kind of look at all the things that have changed you know we have new CSS features that are added we have new JavaScript features that are added we have reactor and other component-based Frameworks and then we have Frameworks built on top of Frameworks but the thing all these different things share in common is they're all built on top of the same fundamentals they're all built on CSS HTML and JavaScript so make sure you have a really under strong understanding of HTML CSS and JavaScript and of those three I think currently the most important to learn really well is going to be JavaScript followed by CSS next depending on how much you want to be in like the design side of things but JavaScript is really where everything is going everything is built on top of JavaScript there's back-ends in JavaScript front ends full Stacks everything seems to be kind of moving towards JavaScript so really make sure you have a strong understanding of the language itself how to use it and how things work by doing this it's going to make learning all of these new tools much easier sure there's going to be some mindset shifts you have to make but if you have a strong understanding of JavaScript switching to using like react or next is going to be a much smaller hurdle than if you just jump straight into reactor next without actually learning JavaScript first so again focus on those fundamental skills they take quite a while to learn but if you learn them to the point where you really understand and Mass to them I promise you learning the other things like front-end Frameworks is going to be so much easier also let's say that you could spend a year learning JavaScript or a year of learning react if you spend a year learning JavaScript you then have a few months that you need to take to learn react on top of that that's okay but if you spend a year of learning react and then you find out after that year react kind of fell out of favor and now something else has come and replaced it you just wasted a year of your time because you still don't understand JavaScript so if you have these fundamentals it doesn't matter if new technologies come along you're still going to be able to adapt your skills to those new technologies which makes it much easier to keep up with things another really important thing to do is to not get overwhelmed with new things or get overwhelmed by other people that seem like they are just getting it right away if you go on to social media you'll just are bombarded by people that are like hey I learned web development in 0.3 seconds and now I have a job paying me a million dollars a year looking at this kind of stuff doesn't actually help you with learning web development it just makes you feel like you're not smart enough you're not good enough like all these other people are doing it quicker they're doing it better why am I not able to do that but the thing that you don't realize is those people are by far the outliers learning the program is not something you can do in a week or a month or even like six months it takes a long time to truly learn how to program well so people that are claiming that they did it incredibly quickly sure there may be a few people out there that can actually do that but chances are they most likely just got really lucky or maybe they knew someone in the industry that was able to help them get a job because learning programming so quickly it's just not not something that you can realistically do don't feel bad if it takes you six months a year two years five years to learn programming that is a hundred percent normal even me I've been programming for 10 years and still to this day I'm learning new stuff all the time it seems like every other day I'm learning something new I mean partially it's my job to learn new things but still there's new stuff coming out all the time I'm constantly learning new things so don't feel bad if you feel like you have more to learn because you're always going to have more to learn that's really part of the joy of learning web development another really crucial thing you can do to make sure that you're learning things correctly is to actually try to find road maps that'll lead you through the path that you need to go to learn different Technologies I have a JavaScript based roadmap and I'm going to be working on a react one here fairly soon I'll link those down in the description for you so you can check them out to kind of look at what you need to learn in what order but there's tons of other ones out there like the Odin project is a big one and really just any course out there even if you don't buy the course I'm going to give you my hot tip here just go to the table of contents of the course and look at it it's probably going to tell you a pretty good approximation of what you need to learn and in what order to learn it so even if you don't end up buying a course just go and look at the table of contents I'll link the table of contents for my JavaScript course and some of my other courses down below so you can check them out but just looking at those table contents and looking at different roadmaps can give you an idea of what you need to study because the hardest thing in my opinion with learning to program is knowing what to learn there's so many things out there things are constantly changing it's hard to know what you don't know so if you look at a roadmap or an outline or something like that it'll kind of tell you the different things you need to learn so you know what you need to learn and what you don't already know so you can make sure you fit that into your studies now the final important thing to understand about learning to program is if you want to be successful you need to make sure that you make the learning process enjoyable I don't care how you do that but do something that makes learning the program enjoyable probably the best way in my opinion to do that is to build projects that interest you and constantly expand upon them and make them your own thing even if you watch a tutorial on how to build a project take the project from that tutorial and expand on that project add new things to it just make it your own actual project that's going to be the best thing that you can do to make sure that you have fun while you're programming and you're going to be learning so much more if you do something that is enjoyable to you now I know when you're first getting started it's really hard to build a project that seems enjoyable because your skills are so limited that the things that you can build are not very complex but just try to inject some other types of hobbies that you have into whatever you're doing as you can see by the bookshelf over here I like to read all those books on the bottom are mine so maybe if I was doing this I would make something that was like a library where I could like input the books I read maybe give them a rating for example as a fairly simple project you can build even at a fairly you know beginner skill level and you can just remove some of the more advanced features from it and as you start to get better and better you can constantly add to the project until it becomes something really cool like maybe you get it to the point where it's like a Goodreads clone for example which is a much more involved project but it started out as just a place where you can put simple like a to-do list essentially but for books like that's how easy it started and as your skills got better you can expand upon it so it always keeps you excited to learn new things because they're not just things you're learning because they're on a checklist you're learning them because you can apply them to projects that you find interesting and cool now I know I mentioned a lot of resources in this video for you to use I'll try to link all of them down in the description below but if I forgot any just let me know and I'll add it in there and with that said thank you very much for watching and have a good day

Original Description

JavaScript Course Table Of Contents: https://javascriptsimplified.com/beginner-table-of-contents?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-z9FeTl5eq9E React Course Table Of Contents: https://reactsimplified.com/beginner-table-of-contents Learning web development is hard and it has only been getting harder and harder each year. In this video I talk about why web development has been getting harder to learn and what you can do to overcome that difficulty and truly learn web development. 📚 Materials/References: JavaScript Course Table Of Contents: https://javascriptsimplified.com/beginner-table-of-contents?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-z9FeTl5eq9E React Course Table Of Contents: https://reactsimplified.com/beginner-table-of-contents My Courses: https://courses.webdevsimplified.com Odin Project: https://www.theodinproject.com 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 01:34 - The Problem 02:44 - What Is Changing 08:48 - What To Do About This #WebDevelopment #WDS #JavaScript
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Web Dev Simplified · Web Dev Simplified · 0 of 60

← Previous Next →
1 Introduction to Web Development || Setup || Part 1
Introduction to Web Development || Setup || Part 1
Web Dev Simplified
2 Introduction to Web Development || Understanding the Web || Part 2
Introduction to Web Development || Understanding the Web || Part 2
Web Dev Simplified
3 Introduction to HTML || Your First Web Page || Part 1
Introduction to HTML || Your First Web Page || Part 1
Web Dev Simplified
4 Introduction to HTML || Basic HTML Elements || Part 2
Introduction to HTML || Basic HTML Elements || Part 2
Web Dev Simplified
5 Introduction to HTML || Advanced HTML Elements || Part 3
Introduction to HTML || Advanced HTML Elements || Part 3
Web Dev Simplified
6 Introduction to HTML || Links and Inputs || Part 4
Introduction to HTML || Links and Inputs || Part 4
Web Dev Simplified
7 Learn Git in 20 Minutes
Learn Git in 20 Minutes
Web Dev Simplified
8 5 Must Know Sites For Web Developers
5 Must Know Sites For Web Developers
Web Dev Simplified
9 10 Best Visual Studio Code Extensions
10 Best Visual Studio Code Extensions
Web Dev Simplified
10 Learn CSS in 20 Minutes
Learn CSS in 20 Minutes
Web Dev Simplified
11 How to Style a Modern Website (Part One)
How to Style a Modern Website (Part One)
Web Dev Simplified
12 How to Style a Modern Website (Part Two)
How to Style a Modern Website (Part Two)
Web Dev Simplified
13 3D Flip Button Tutorial
3D Flip Button Tutorial
Web Dev Simplified
14 How to Style a Modern Website (Part Three)
How to Style a Modern Website (Part Three)
Web Dev Simplified
15 Animated Loading Spinner Tutorial
Animated Loading Spinner Tutorial
Web Dev Simplified
16 How to Write the Perfect Developer Resume
How to Write the Perfect Developer Resume
Web Dev Simplified
17 Animated Text Reveal Tutorial
Animated Text Reveal Tutorial
Web Dev Simplified
18 Learn Flexbox in 15 Minutes
Learn Flexbox in 15 Minutes
Web Dev Simplified
19 Custom Checkbox Tutorial
Custom Checkbox Tutorial
Web Dev Simplified
20 Start Contributing to Open Source (Hacktoberfest)
Start Contributing to Open Source (Hacktoberfest)
Web Dev Simplified
21 JavaScript Shopping Cart Tutorial for Beginners
JavaScript Shopping Cart Tutorial for Beginners
Web Dev Simplified
22 Responsive Video Background Tutorial
Responsive Video Background Tutorial
Web Dev Simplified
23 1,000 Subscriber Giveaway
1,000 Subscriber Giveaway
Web Dev Simplified
24 How To Prevent The Most Common Cross Site Scripting Attack
How To Prevent The Most Common Cross Site Scripting Attack
Web Dev Simplified
25 Transparent Login Form Tutorial
Transparent Login Form Tutorial
Web Dev Simplified
26 The Forgotten CSS Position
The Forgotten CSS Position
Web Dev Simplified
27 How to Code a Card Matching Game
How to Code a Card Matching Game
Web Dev Simplified
28 10 Must Install Visual Studio Code Extensions
10 Must Install Visual Studio Code Extensions
Web Dev Simplified
29 Learn CSS Grid in 20 Minutes
Learn CSS Grid in 20 Minutes
Web Dev Simplified
30 Learn JSON in 10 Minutes
Learn JSON in 10 Minutes
Web Dev Simplified
31 10 Essential Keyboard Shortcuts For Programmers
10 Essential Keyboard Shortcuts For Programmers
Web Dev Simplified
32 What Is The Fastest Way To Load JavaScript
What Is The Fastest Way To Load JavaScript
Web Dev Simplified
33 Differences Between Var, Let, and Const
Differences Between Var, Let, and Const
Web Dev Simplified
34 How To Install MySQL (Server and Workbench)
How To Install MySQL (Server and Workbench)
Web Dev Simplified
35 Learn SQL In 60 Minutes
Learn SQL In 60 Minutes
Web Dev Simplified
36 How To Solve SQL Problems
How To Solve SQL Problems
Web Dev Simplified
37 What Are Design Patterns?
What Are Design Patterns?
Web Dev Simplified
38 Null Object Pattern - Design Patterns
Null Object Pattern - Design Patterns
Web Dev Simplified
39 Your First Node.js Web Server
Your First Node.js Web Server
Web Dev Simplified
40 How To Setup Payments With Node.js And Stripe
How To Setup Payments With Node.js And Stripe
Web Dev Simplified
41 How To Learn Any New Programming Skill Fast
How To Learn Any New Programming Skill Fast
Web Dev Simplified
42 Asynchronous Vs Synchronous Programming
Asynchronous Vs Synchronous Programming
Web Dev Simplified
43 JavaScript ES6 Arrow Functions Tutorial
JavaScript ES6 Arrow Functions Tutorial
Web Dev Simplified
44 Are You Too Old To Learn Programming?
Are You Too Old To Learn Programming?
Web Dev Simplified
45 JavaScript Cookies vs Local Storage vs Session Storage
JavaScript Cookies vs Local Storage vs Session Storage
Web Dev Simplified
46 JavaScript Promises In 10 Minutes
JavaScript Promises In 10 Minutes
Web Dev Simplified
47 Builder Pattern - Design Patterns
Builder Pattern - Design Patterns
Web Dev Simplified
48 JavaScript == VS ===
JavaScript == VS ===
Web Dev Simplified
49 JavaScript ES6 Modules
JavaScript ES6 Modules
Web Dev Simplified
50 8 Must Know JavaScript Array Methods
8 Must Know JavaScript Array Methods
Web Dev Simplified
51 CSS Variables Tutorial
CSS Variables Tutorial
Web Dev Simplified
52 JavaScript Async Await
JavaScript Async Await
Web Dev Simplified
53 How To Choose Your First Programming Language
How To Choose Your First Programming Language
Web Dev Simplified
54 Easiest Way To Work With Web Fonts
Easiest Way To Work With Web Fonts
Web Dev Simplified
55 Singleton Pattern - Design Patterns
Singleton Pattern - Design Patterns
Web Dev Simplified
56 Responsive Navbar Tutorial
Responsive Navbar Tutorial
Web Dev Simplified
57 CSS Progress Bar Tutorial
CSS Progress Bar Tutorial
Web Dev Simplified
58 Learn GraphQL In 40 Minutes
Learn GraphQL In 40 Minutes
Web Dev Simplified
59 What is an API?
What is an API?
Web Dev Simplified
60 Learn How To Build A Website In 1 Hour!
Learn How To Build A Website In 1 Hour!
Web Dev Simplified

The video emphasizes the importance of learning web development fundamentals and adapting to new technologies and frameworks. It provides guidance on how to create effective roadmaps, identify what to study, and apply learning to interesting projects.

Key Takeaways
  1. Try to find roadmaps that'll lead you through the path that you need to go to learn different technologies
  2. Look at the table of contents of a course to get an idea of what you need to learn and in what order
  3. Build projects that interest you and constantly expand upon them
  4. Make the learning process enjoyable
  5. Incorporate hobbies into projects to make them enjoyable
  6. Build simple projects and add features as skills improve
💡 Learning web development fundamentals and adapting to new technologies and frameworks is crucial for success in the field.

Related Reads

📰
Inside the Wayfair Frontend SDE-2 Interview: A Complete Breakdown
Learn how to prepare for a Frontend SDE-2 interview at Wayfair, including online assessments, machine coding, and system design.
Medium · Programming
📰
I Spent Two Years Maintaining a React SPA. HTMX Rebuilt It in a Week
Learn how HTMX rebuilt a React SPA in a week, replacing 2 years of maintenance work, and discover the benefits of this alternative approach
Medium · Programming
📰
The 5 Levels of Front End Engineering (And Where Most Developers Get Stuck)
Learn the 5 levels of front end engineering to improve your skills and avoid getting stuck in a career rut
Medium · Programming
📰
Browser-Based PDF Editing with Vue 3 and pdf-lib
Learn to build a browser-based PDF editor using Vue 3 and pdf-lib, enabling users to edit PDFs directly in the browser
Dev.to · sunshey

Chapters (4)

Introduction
1:34 The Problem
2:44 What Is Changing
8:48 What To Do About This
Up next
How to Use Semrush Keyword Magic Tool with ChatGPT to Make Money
Grow with Will - SEO, Sales & Entrepreneurship
Watch →