Web Development In 2023 - A Practical Guide

Updated 2024 Version - • Web Development In 202...
This is an in-depth guide that goes over every major technology that has to do with web development, from languages to frameworks to utilities.
Content Guide Of Videos/Courses:
www.traversymedia.com/guide
Premium eBook Version:
traversy.gumroad.com/l/web-de...
Design For Developers Repo:
github.com/bradtraversy/desig...
My Web Development Courses:
www.traversymedia.com/
Timestamps:
0:00 - Intro
1:30 - About This Guide
3:38 - Overall Goals
6:23 - Types Of Web Developers
9:05 - The Essentials
13:55 - HTML & CSS
19:44 - JavaScript
23:17 - Sass & Post CSS
25:23 - CSS Frameworks
28:27 - UI Design Principles
30:57 - Design Software
33:01 - Tools & Utilities
39:19 - Helpful AI Tools
42:15 - Front-End Deployment
45:27 - Foundational Front-End Developer
48:54 - Your Next Path
51:56 - Front-End Build Tools
55:12 - Front-End Frameworks & Ecosystems
57:50 - React
1:01:24 - Vue
1:03:53 - Angular
1:06:08 - Svelte
1:07:57 - SolidJS
1:09:58 - TypeScript
1:11:48 - UI Kits & Component Libraries
1:15:01 - Testing
1:16:43 - Web APIs
1:18:56 - Full-Stack Frameworks
1:25:36 - Static Site Generators
1:30:26 - Headless CMS
1:34:02 - The Jamstack
1:24:38 - Alpine,js & Lit
1:36:41 - Visualization & Animation
1:38:33 - No-Code Tools
1:40:02 - Front-End Superstar
1:42:13 - Server-Side Languages
1:50:29 - Server-Side Frameworks
2:05:35 - Relational vs NoSQL Databases
2:09:02 - Database Management Systems
2:19:12 - ORM (Object Relational Mapping)
2:22:11 - REST API & GraphQL
2:25:15 - Authentication & Authorization
2:28:54 - Full-Stack & Back-End Deployment
2:32:47 - DevOps Skills
2:37:06 - Back-End / Full-Stack Superstar
2:39:57 - Mobile Development
2:43:18 - Progressive Web Apps (PWA)
2:44:03 - Desktop Applications
2:46:17 - Web Assembly (WASM)
2:47:25 - Advanced AI
2:50:44 - Web3
2:52:58 - Outro

[@TraversyMedia]

Sorry it's so long this year. Don't let that overwhelm you. It's not that there are that many new technologies. I just decided to talk a bit more about everything 😊Skip around and use the timestamps if needed.

[@NOCDIB]

Congrats on the 2 million! I've been around since about 400k and I'm glad to see your continued success.

[@thedimasss]

Very informative content, thanks! Enjoyed your idea to listen video. Do you have any podcasts?

[@learningtocode795]

This is perfect!! Thank you for the in-depth guide. As a noobie I don’t know what I don’t know so this definitely helps me to make sure I am on the right path to learning web development and staying up to date.

[@TheWolfgangGrimmer]

That's fine with me. It helps a lot with bringing clarity to the bigger picture of the landscape.

[@henriqueaguiar9737]

Tbh Brad I could listen you talk about this stuff all day long, thanks a lot for all you have done for the dev community

[@AndrewFungKinHo]

For programmers, a new year is incomplete without watching Brad's classic guide on web development. When I watched the Web Development Practical Guide 2018 almost 5 years ago, I was just coding a “Guess My Number Game” on HTML and now I am watching 2023’s guide as a Full stack Dev with a KZbin channel documenting my progress. Thank you very much Brad Traversy and Congratulations on 2 Million subscribers! 🎉

[@nesa6582]

Is it worth watching this? I'm newbie 🫠

[@MyName-fr3nf]

@@nesa6582 absolutely

[@gradientO]

Subscribed :-)

[@shahjeelani2691]

U always write this don't u

[@bekzodmuxammadjonov9753]

hyrtrfgsdgsddzxcszdcgdfbzdfhsvcbsfgh

[@TheCodeholic]

You are silent for months and we think you are getting your deserved rest, but you return with 3 hours guide tutorial, 300 page ebook and a dedicated page with video tutorials following your guide. You are amazing Brad.

[@tanvirhasanmonir1627]

Hey dear Codeholic ( Jura Sir), your contribution to the PHP-Laravel conmmunity is really great! You and Brad are gems for us.

[@TheCodeholic]

@@tanvirhasanmonir1627 Thank you for your words my friend. The difference between me and Brad is that Brad is hero and I am trying to become hero with small steps 😀

[@TraversyMedia]

hehe, yeah and this was only the last month or so. before that I was creating my 37 hour JS course and my platform 😉

[@TheCodeholic]

@@TraversyMedia I saw that video you announced new JS course and you platform. My comment is related to that video as well. 😀 When you love what you do so much you don't want to take long breaks. You can't live without coding. We are codeholics 😀 I am really happy that you finally created your platform.

[@AjarnSpencer]

I cried when i finished my first ever 370 page ebook. I bet Brad felt similar when he finished it and saved it to drive. It is a lot of blood, sweat and teasr to write such a detailed ebool\h. I took 3 months too, and it was sweatshop work Mine was about Thai Occult

[@universecode1101]

The guide many developers have been waiting for. This channel is a MUST for developers on KZbin.

[@satisfymyeye1431]

2 Years ago I watched Brad's Html for beginners video for the first time in my life I came across web development. It was a long journey I learned everything about the front end and now I'm able to get my first job and ended up with some offers. Many of them put me on hold but one of them is giving me an opportunity in a few days I'm starting my first position. Still, last month I became really depressed and a lot of things were crushing my mind (you know how it goes with frickin procrastination) and I started to watch this video, it got me boosted again and it got me "back on track"!! So I wanted to say THANK YOU BRAD, it's always a pleasure to listen to you and in some way you make it so clear and calm me down and show me the way. You are the Jesus of tutorials 😂. I LOVE YOU MAN! ❤

[@TraversyMedia]

Thank you. Yeah, unfortunatey life happens and we go through tough times and get burnout, procrastinate, etc. It happens to me as well. Keep pushing through. I'm glad I could give you a little motivation 😉

[@dreamisover9813]

These guides are invaluable! It's hard to keep an overview when having been away from the web dev space for a while, and while some frameworks have been around for years, the landscape is constantly changing and there are just so many topics to keep track of. So thanks for this!

[@DanielGomez-kx9ov]

When I was just starting to learn about the front end. Brad was the first content creator/teacher/mentor I connected with and started to understand things. The calm way that Brad talks, without beating around the bush, without saying "this is too easy" reflects a lot of the respect he has for the profession and the love he puts into every video he makes. Thank you Brad. Today I am a senior frontend developer thanks to the basics I learned with you. You are a hero.

[@sarthakneupane9567]

I started back in 2018 with the same video. Nowdays, I don't really follow a lot of web dev channels and don't click on videos unless I search for it, but as soon as this dropped, I instantly clicked. Other channels out there also started posting these but, it doesn't hit like the video you upload mate. The originality and authenticity just comes instantly. Really appreciate it.

[@mrcgomez]

The fact that you take the time to do this long of a video is very much appreciated. I just finished the whole thing and it was done right. Very thorough and congrats on the 2 million.

[@christopherninman4676]

Best 3 hours I have spent on KZbin, period! Most useful and concise video I have encountered in my software development learning journey. It puts everything in perspective and has given me a so much more complete overview of what is out there. Brad knows his stuff, and has his preferences, but clearly explains everything you need to know as it relates to you and what you want to do. Amazing quality, knowledge, and thought put into this project. Thanks Brad, your work is a gift to the development community!

[@dabunnisher29]

Hey Brad, I have been subscribed to your channel for years, and I it was great to see that this video was up. Hearing that intro music just made me feel good. You have been so instrumental to sooooo many people. You CONTINUE to be 1 of the top guys for programming for me and a lot of people. Thank you for all that you do. Big fan in Vegas.

[@kugi7786]

Every year i get further in these videos. Its easy to get overwhelmed in web dev, thanks to you i get a breakdown of everything and have a solid roadmap. thank you again this year Brad!

[@nemeziz_prime]

Brad what you and the Traversy Media Team are doing for the community, you guys are gems 🙏🏻💙 Can't thank you enough for everything you teach us

[@tylerbray7693]

Hey Brad! I just wanted to drop a comment to say a huge thank you for your video. I've been trying to wrap my head around all the latest web technologies and trends, and your video just made everything so much clearer. Your explanations were super easy to follow, and the tips you shared were incredibly practical. I really appreciate how you made everything so relatable and down-to-earth. It really helped me see how everything fits together and how I can apply it in the real world. Thanks again for being such an awesome teacher and sharing your knowledge with the world. I'll definitely be checking out more of your content in the future! Cheers

[@imnothere2802]

Brad thank you for this one. Is one of the most well described road maps ive ever watched around internet. Thank you for sharing it out with us, and also congrats on the 2 milly coders here on YT. Hope you have a great day my friend. :)

[@drummondcodes4600]

I hope to land my first coding job this year. Looking forward to watching this video for help. Thanks for your consistent content to help us who are aspiring to break into the tech industry.

[@MarcMcRae]

This is an insanely comprehensive mega-summary that when I watched a few years ago, I was over-whelmed. A few years down the line, more knowledge & experience, this is an amazing & useful share..and yes, I sat & watched the whole thing! LOL Thnks Brad. Great job!

[@go25478]

Impressed by very descriptive summary of each language and tool. YOU ARE THE BEST! Thanks for your hard work 🚀🦖

[@lordvexxie8175]

Another year and just like all the ones here in the past I have returned for the daily update! Already a seasoned full stack developer, but nonetheless these videos help me me determine course for the rest of the year. Thanks Brad for making this possible. 🙏🏻

[@sankalppandey7995]

I literally checked yesterday for a Practical Guide for this year and here we have the video. Thank you so much Brad!

[@BilalBaloch-tl2bp]

What a perfect timing for this video. I was planning to start learning Full Stack Web Development but was unsure of what languages to learn and how to start. Thanks Brad for the video and congrats on 2M subscribers.

[@GaryCrossey]

Thankfully you have a great voice - settling in for the 3-hours, appreciate the work you have done.

[@aCitizenJOSerased]

Immense quality! Tons of really valuable info and knowledge provided in here. Thank you very much, Brad!

[@SeamusMcMichael]

Brilliant comprehensive overview. I particularly like the explaining of topics such as UI, for the front-end aspects of web.

[@DesignCourse]

BEAST of a video! Heads up: 31:03 Adobe XD will likely be phased out this year, as Adobe bought Figma. I would not choose XD if you're starting out and are thinking about which UI software to start with. I'd go with Figma personally.

[@TraversyMedia]

Guess I'm going with Figma. That is what I suggest anyway. I've just always been an Adobe guy all through my freelance days.

[@DesignCourse]

@@TraversyMedia Same!

[@I_Lemaire]

I apologize, Gary. I read somewhere that the Justice Department will move to block the Adobe-Figma acquisition. If so, XD will be here to stay.

[@rkyrmnd]

@@I_Lemaire Last I read, it was EU regulators looking at it. Also, there's been no announcement or open discussion about them discontinuing XD so I highly doubt it's happening this year. Plenty of companies rely on XD and Adobe suite, if they do anything it would be a soft retirement of the figma brand while they integrate the free tier online editor to XD.

[@JivanPal]

@@rkyrmnd If Figma disappears like that, that will make me very sad... I hope FOSS alternatives like Quant get some more traction, it's a shame none have really taken off in this area.

[@PonderingCash]

Thank you for such a in-depth take on all these platforms, this was very easy to digest and informative, Subscribed !

[@BarryThatcher]

Thank-you for your AWESOME content! You teach each concept clearly with ease which inspires us. I've been following your channel for 3 years now. Your channel is trustworthy and been extremely helpful! Thanks again :)

[@garysmith8089]

PHD course in WEB DEV... Much thanks Brad. Looking for the next year of Personal Growth with YOUR HELP!

[@souhail_benlhachemi]

4 years ago I had a Final Year Project to complete my university degree and it was about the Symfony framework.I didn't find any good tutorial on KZbin and it was then when I discovered this amazing channel. And since then, Traversy was the documentation on my web dev journey.

[@nilanjanbhattacharyya9065]

The resource section is awesome with course link and their associated project making. This is all you need with your patience & perseverance to become a web developer in 2023.

[@user-zb9ub5nd1z]

Hi Brad, I remember about 4 years ago, i followed your tutorial about flask for web development. I think there’s something special about u coz to date I can still hear your voice even though I did like only 2 episodes. I think it’s in the kindness of your voice- it’s in the patience of your voice as u try to make us understand. I’m glad to b watching u again. Lov u & b blessed.

[@irimaya]

Thank you Brad for this guide. Following your online guide is so helpful to continue in this Web Development path 😀

[@nanigahcaleb]

Thanks so much for the video. You placed so much effort in the research, presentation and all that. Thank YOU!

[@ChristopherWard1967]

Brilliant video. Thanks for the massive amount of work you've clearly put into this.

[@ceralguy85]

Thank you Brad for such an amazing content like every Year is probably the most awaited video from the community. Just one little annotation is that C# is also part of the wasm languajes. Since I also worked with C# and now from the last years also work with JS it would be great if you can create content also on C#

[@justchris846]

I shared this Video to my Facebook, short of you being a state certified teacher in a college classroom, you’ve done a wonderful job!

[@nordicnomad5473]

I really admire the effort and time behind this video and the amount of research done for the content. Thank you so much ❤❤❤

[@yubrajshahi]

You have been a great tutor. Learning your course "Modern JavaScript From The Beginning 2.0" its awesome course. Every developer must take this course. I been eagerly waiting this one. Thank you so much.

[@VforVanish]

The amount of work behind this is amazing!

[@BitsAtPlayGames]

As a long-time programmer looking to get into web development but needing to get oriented with an overview of current web technologies to decide on a good learning path, this video was EXACTLY what I was looking for!! Awesome job! 🤓👍

[@rod6722]

2:26:31 I've been building a single-page application with React and a REST API in Express, and even in this use case I personally found sessions and cookies much more intuitive and simpler to implement than JWTs.

[@Joshuahendrix]

I watch and learn more every year 🎉 Finally looking back from a position in the industry, big thanks to Brad!

[@nancychaudhry3623]

Wow! Really great content. I stopped the video several times to bookmark some of the tools that were covered. Thank you!

[@lukas.webdev]

All the best for your journey! Maybe my videos are helpful for you as well ... 😉

[@OMFUCKG]

Awesome work. You answered a lot of questions in one video, thanks for this.

[@vincentlin7372]

thank you traversy media, i love watching your video, helping me make my learning map more clear and not feeling lost when learning.with so much framework on the web, learning web can feel confused, and not sure how all the dot is connected to develop app, thank you again, hope you have good time and your video motivate me to learn and challange myself~

[@AjarnSpencer]

I have 25 years behind me webmastering, and you sound like and oldskooler too who has stayed up wth current trends. Fantastic synopsis man. When i began in the days of 1990's we had static html and ftp upload, then mysql and php came, and dynamic web.. now look where we are!

[@kurtm9744]

Ruby on Rails is still great, especially with version 7 ❤ Thank you so much for putting these guides together every year.

[@Escko]

This is great, it helps so much in painting a bigger picture of the web dev space and also helps me familiarize myself a bit more with the different technologies. Thank you so much, we r so blessed to have some amazing instructors on KZbin.

[@anthonywest7261]

Thank you so much. I can’t begin to think how much work has gone into this.

[@anabrum9351]

watching this now, end of nov 2023, and still finding it very useful. Looking forward to 2024's, please don't make it short, this was perfect as it clearly explains everything and we can move back and forth if we don't want to watch the whole video. thank you.

[@MYount]

Hello, thank you🤙 Brad for keeping me going. I have been learning from you for at least 4 years (I even finished your Udemy courses). I am in a Web development Boot camp at MIT xPro. Still learning, still growing. Thanks 👍.

[@Mrslykid1992]

This is soooooo good. I always tell my junior devs and mid devs. Know your tools and problems. Not just a common method for solving for 1 problem. Great abstraction!

[@jcsmooth7123]

I found this to be fantastic. I have been learning and dabbling with learning html and css before moving onto bigger and better things. I have a couple of personal projects that I want to do, but I am in no rush to get going. I found this great because I need to know the full picture. When starting out with the basics of html and css, you look at a web inspector on your browser of any website and you wonder how the heck html and css grows into 8500 lines of code. I get that foundations are important, but I am a full picture guy so I know where I am heading. This video was perfect, I love the channel, keep it coming.. thank you

[@justinhoward6384]

Been mentally preparing myself for this, so much change in the past year

[@batshevabattu8560]

I sat through all of it! :) Can't believe it! :) I am a French as a Foreign Language online teacher who is thinking of retraining in IT: but what do I want to do? I didn't quite realize when I started researching potential future jobs that saying you 'want to work in IT' is about as vague as saying you want to be a 'Scientist'... So I sat through your whole video and then looked at job listings in my city: having all the names and logos for languages, frameworks etc helps me understand more what is needed in my city. I definitely need something more basic now to understand web development better, but I'll definitely be able to come back to this video (or to your updated, 2024 video!) when it's time for me to find what tools of the trade I'd like to work with. Brilliant stuff, thank you!

[@dazball3707]

A really awesome video! As a long term and mostly self taught full stack developer, this video was great for confirming existing knowledge and to fill in some blanks in other areas! 10/10 dude!

[@azamatmambetov8467]

Dear Brad, please never stop doing what you are doing! Thank you! Great video!

[@EDIT_BRUH]

I know I have been late for this, but I just entered the CS field and after 56 min of this video I am overwhelmed I know it will take some time i wanna start learning programming step by step

[@gustavoluissalesferreira3385]

Thanks a lot! Brad has been my mentor since 2012! Owe my entire carreer on web development to him! God bless this great guy!

[@anzumanararunu1343]

Traversy is more generous and dedicated person I have ever seen. Love from Bangladesh🎉

[@andygloverdev]

Thank you! I've been looking forward to this, really appreciate all the work you put into this resource!

[@YOSHELF]

I know this video is older. You have laid out a guide on when to learn what and what to learn next and I will fully appreciate this guide so much I was lost I had no map on the next thing to learn in the langauges and what I hadn't learned in them. This is so helpful to me in so many ways I appreciate it so much, I have not seen a guide like this.

[@mohammadnizam2156]

Man what you have done is amazing! ton of effort, best of luck, keep going and giving 🙏

[@archtopo9658]

As always, this guide is amazing! Thanks again, Brad! Greetings from Greece

[@kassa2582]

Been using Symfony at work and I think it's so good, so much so I use it on side projects over Svelte now.

[@greenshaheen6716]

waiting for this from Dec,2022. Keep it up. 🔥 Love from your subscriber❤️

[@dawoodchowdhury5581]

Thank you, Brad. Really helpful to have a bird's eye view. Helped me tremendously to realize my progress so far (which I was confused about) and path ahead.

[@lukas.webdev]

Awesome, all the best for your journey! 😉

[@manikandanvijayakumar5435]

Thanks Brad for the detailed video, also for guiding us which direction we should head us to.. 😀 👍

[@nestor-martinez]

It's wild that this content just exists out here for free, thanks to Brad's commitment and hard work. You're a beast Brad, my sincerest thank you.

[@emakogala359]

A good instructor is the one that shows you ways, but you Brad are an inspirator that shows motivation. Great job indeed.

[@AlexDBall]

Man, i was looking forward for this! What a great way to spend my afternoon. Thank you!

[@Nintron]

For a Rust server-side framework, generally Rocket is no longer recommended as it's not really maintained. Usually the top choices now are Axum or Actix.

[@IbrahimDar-nu5tz]

You have created such a concise and helpful guide. Thanks for help!

[@zahid1909]

Great comprehensive roadmap for full-stack developers. Thanks a lot

[@hqasmei]

A wonderful video, I wish I had these types of videos starting as a developer. Extremely concise and give so much useful information.

[@lukas.webdev]

True! 😉

[@David-Dono]

I don't remember if i've said thank you before but ill say it again. Thank you! Your Node and Angular videos helped me add the missing pieces to my Computer Science degree. It helped me get started in my career by landing me my first serious job as a Software Developer 😁

[@Nin_Cada]

As a new web developer..That was super helpful to me. Thanks a lot mate✨

[@henrythomas7112]

Great video! Some key points were highlighted that I hadn't heard anyone else discuss. Thank you!

[@webpack1705]

I was waiting since December 2022 😊 finally brad done it 👌🏻

[@kodjocode]

Comprehensive guide. Thank you Brad. Love your videos

[@romanroman9638]

Thanks Brad, appreciate your work!

[@alexandergrunewald9191]

I've been a web developer for more than 12 years starting with PHP / MySQL ending up doing Angular projects most of the time. In Feb 2022 I quit my job and traveled the world for a whole year. I soon want start working again. This video has been super helpful to get "up to date" and refresh all the names and technologies out there. Thank you so much.

[@lukas.webdev]

Awesome! Thanks for sharing your story, Alex! 😉

[@dzehme]

Excellent guide! Very comprehensive. Will refer to it often this year.

[@lukas.webdev]

Awesome, all the best for your journey! Maybe my videos are helpful for you as well ... 😉

[@sanjaybatak3549]

just finished the whole videe. Well done brad. You r our No. 1 instructor on the whole of KZbin.

[@briandacallos4234]

When i was a student, i usually visit this kind of brad's content. Now i am a 1 year software developer thanks to this guy

[@aliyusuf-edu]

Thanks alot mr Brad, i appreciate your hardwork and your excellent explanation.

[@husseinkizz]

Brad as always, man I can't tell you how much you inspire me, that self taughts can also do stuff and give back to community!

[@archimedesredes]

I'm really happy, know you contribute for my life Brad, thank you. Today I'm a web developer and you help me. Thanks.

[@SrdjanMaravic]

Thank you for all the work you are doing, you inspired me 2 years ago to start learning web development (again), and i managed to get FE job! btw, on the guide page of your website Vue Crash Course link leads to react playlist. Cheers

[@RhayvenBlood]

For terminals on windows - Terminal (Or terminal preview) is superior to cmd and bash, and integrates them into one program. Also can utilize bash and LSW into it :3 It gives a lot more to work with and work efficiently.

[@wassup102]

watched the full video. felt like a good podcast, i gained surface level information of what each tech does, thank you

[@lauroduarte1337]

Waiting since christmas for the 2024 version 😁 Been following this since the first version and it's my little Christmas present every year from Traversy 🥳 This is QUALITY content!

[@subzerosumgame]

was so furstrated past two weeks because - i'm just starting out and it took me tons of useless am repeating useless video's/reddits/googling/twittering to finally have a clear framework and clear understanding what methodogies are used for what. this is a very impactful video that will stay with me for the rest of my life. stay healthy!

[@ESLAMMohamed-sg2rn]

Best 3 hours I have spent on KZbin, period! Most useful

[@vrfEducation]

Great as always. I've learned a lot from you. You're totally my hero. 👍👍

[@saurabhdavda79]

woah web development is much more interesting and in depth which i came to know by knowing you thnx man grateful that i found out the video.Have a good year ahead .THNX man once again. -from INDIA

[@StevePimen]

Great annual review of perspective web technologies. A+! I like AI concise review and cooling predictions :). Brad, about your DOM chart: The DOM document has hierarchical priority over the window object.

[@user-fx5uo7uz7p]

awesome. Just what I needed to help get my project website of the ground.

[@OdhiamboJose856]

best three hours of my time, learnt a great deal of stuff

[@alertnikole]

Its July - this popped up on my feed this year. Missed you!