Web Developer Roadmap (2024) - Everything is Changing

Подписаться 119 тыс.

Просмотров 231 тыс.

50% 1

👉 Video sponsor AppMySite: www.appmysite.com/?ref=intern...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more kinde.com
⏱️ Timestamps:
00:00 Top 4 changes in web dev
02:38 Sponsor AppMySite
03:58 Fundamentals
04:30 HTML
04:36 CSS
05:50 JavaScript (ES6+)
08:00 Frontend
08:16 React
11:53 TypeScript
12:27 Backend / Fullstack
12:44 Next.js
15:50 Next.js vs Remix vs Astro
16:23 Separate backend
17:10 Node.js
17:29 PHP
17:39 Python
17:55 Java
18:01 Ruby
18:03 Go
18:10 Databases
18:19 ORM's
19:24 Hosted db services
19:57 Ecosystem
20:10 Shadcn UI
21:39 Zod
22:08 React Hook Form
22:36 Framer Motion
22:45 Authentication
23:14 Payments
23:39 Hosting
23:59 Git & GitHub
24:07 Mobile apps?
24:23 Diagram link
#webdevelopment #programming #coding #reactjs #nextjs

Опубликовано:

14 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 328

@ByteGrad 2 месяца назад

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). My Professional React & Next.js course is OUT NOW! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js + ecosystem, my absolute best work.

@threeone6012 Месяц назад

2024 Dev Pipeline Courses => Bootcamp => PT Starbucks Barista

@pjmaas106 Месяц назад

lmao this is too real bro

@techie_teko8923 9 дней назад

what do you propose ?

@damdo808 Месяц назад

FOR JUNIOR DEVS: Do not learn new stuff all tthe time. Focus on something. React + Node backed? Good. Next? Good. Prisma? Good. SQL? Good. Just pick, focus and stop being biased by videos like this. Don't believe in miniatures like this video has - this is not true. New stuff will arrive each month ut this does not mean that you need to drop everything and run for a new.

@glenndollard1224 5 дней назад

I agree. This video is nonsense. This approach to learning is like chasing your tail for the money,it's not sustainable.

@vitorac412 Месяц назад

Roadmap - Logic / Choose a Language / Choose your FrameWork / Go Work as UberDriver. Good Luck Son.

@bushbuddyplatypus 2 месяца назад

I have 10 years experience with front-end, mainly Angular. I have been unemployed for 9 months. In this time I have learnt React, Next, Nest and a slew of other stuff. In all, I have taken a look at 85% of this and worked heavily with 65% of it. And yet, I remain unemployed. I don't think it matters what you learn, unless it's on the job.

@CaptainDouchie 2 месяца назад

is the market that bad or are u just selective with the job? just curious about the struggles because i feel like mid-senior level jobs are plenty

@throwaway-lo4zw 2 месяца назад

This is a you problem I think. Are you not even getting any interviews?

@bushbuddyplatypus 2 месяца назад

Sydney market. 100+ applicants for many jobs. Very few angular jobs advertised. I have started getting React interviews but muscle memory isn't great for tech tests. When it comes to years of React experience, I answer less than 1 year commercially, despite my broad web frontend / SPA / Agile / typescript etc experience. I'd have to lie about commercial React. I'm 54 years old with a solid CV. I wonder how much is about me, the market, and on-paper experience. I'm a pretty good dev, playing with lots of ideas and tech, busting with motivation, but probs have to sell up and change career, at least for a while. Was selective for a while but no longer nor is salary an issue. Thanks for asking

@randomfellow1483 2 месяца назад

Learn backend

@bushbuddyplatypus 2 месяца назад

@@randomfellow1483 my thoughts exactly. something you can hang your hat on.

@fiqihalfarizy4843 Месяц назад

Your simplicity of explaining give me a big idea of how function work

@darkcss1054 Месяц назад

As a newcomer to React/Next, this is the most helpful video I've seen to help ppl catch up with the technological frontier.

@bogaty_ukrainec 2 месяца назад

I love the way you're explaining difficult concepts in an easy and understandable ways, explaining the core of them not forgetting about advantages and disadvantages. That's why I've bought your React+Next.js course, I'm not a newbee in React, but some concepts are still needed to be improved, so that's why I chose you! :) Good luck with your chanel, I'm a big fan of it! ❤

@ByteGrad 2 месяца назад

Awesome, enjoy! :)

@SuperYoda7 Месяц назад

I actually did focus exactly on these plus graqhQL, trpc and react-native. Glad I did! keep up the good content.

@EronMahmuti 2 месяца назад

Hello, one aspect worth noting is that the ongoing updates to frameworks such as React signify its enduring strength and relevance in the field.

@nehalpradhan2229 2 месяца назад

started my journey in may last year. glad to know that i am on the exact path as shown in video.

@erice.3892 2 месяца назад

same

@_DRACrY 2 месяца назад

I love your speaking pace and style, I found your videos very easy to understand and I understood difficult concepts very easily. More power to you, ❤

@samyakpiya 2 месяца назад

Same!

@jrmayol857 2 месяца назад

Awesome vid, Wesley. Looking forward for the next vid!

@ByteGrad 2 месяца назад

Stay tuned! :)

@treyrader 2 месяца назад

Speaking of shadcn, as a jr self taugh dev and who absolutely love your teaching methodolgy and overall aesthetic, I mostly only am hip to shadcn due to the modals. Though i tried the other day wraping the dialog overlay into a motion function to get some animation but gosh i couldn't figure it out. I then took a stab at trying to build my own modals and even using a global state manangement library (zustand), couldnt get the classNames to set fixed positioning and margin on the body and root divs in next14 app router. I know it's possible but i am still tinkering with learning how to be creative with server and interactive components. But gosh i am loving NextUI and whole bunch. I am surprised that i don't see as much hype on youtube as i do with aceternity and shadcn. Aceternity to me is a very raunchy situation though. and shadcn is so crisp! NextUI is a fine hybrid Thanks again for the superb Content, Wesly :)

@abishekbaiju1705 24 дня назад

I think no have made a video this clearly. Excellent roadmap and I am currently learning nextjs and building a ecommerce app. so excited.

@tristanbob 6 дней назад

This is exactly what I needed at this point in my web dev journey. Thank you!

@thedavistheory7674 2 месяца назад

Hey man, I really like your tutorials, but i was wondering maybe you could showcase some basic crud operations with the syncfusion scheduler, because their documentation is kinda lacking in that area

@kotk05 8 дней назад

Thanks big Bro! Started on this journey last week.

@fastneasy 2 месяца назад

It weirdly seems the Roadmap tailor made exactly for me at exactly the time I needed it....thanks man....and thanks universe for conspiring for my success

@phurbutsering4485 Месяц назад

RU-vid's algo imho

@hamim8029 9 часов назад

GOD

@ThePadob Месяц назад

Świetne rady, dzięki!

@EduarteBDO 2 месяца назад

great roadmap, but Isn't this relying too much in Vercel and nextjs?, I know that putting more things could be overwhelming, but what about other options for deploying, like using AWS S3 for deploying static websites, or AWS RDS for databases, or google cloud, asure options. And how to test everything, test a nextjs app for exemple. Idk if this goes out of scope of an web developer and more in a devops direction, but I feel that there's things lacking.

@KoreyMacGill Месяц назад

backend developer for the last 7 years (Spring) with some front end experience from college that's quite rusty. looking to up my skills. your video here was well worth the 25 min watch. will be checking out your course possibly.

@peshutanpavri1599 Месяц назад

Fantastic tutorial, Extremely helpful, I was more or less thinking of the same thing and this is what i have done. I am building my own framework with Spring Boot backend and a React front-end. I am contemplating Vite VS Next, But for Form validation, I can easily do that in React,

@lisongyun Месяц назад

I think JS in backend is just wrong. So does Nextjs. I recommend Vite against Next.

@liviabellomi 2 месяца назад

Thank you very much for this! I'd like to know your opinion on GraphQL. Isn't it relevant to include in the roadmap?

@es7729 2 месяца назад

It's interesting because, just by observing what is what, some puzzles in my head have started to come together.

@valenciawalker6498 3 дня назад

Thank you for the update.

@avi_mukesh Месяц назад

Really helpful video, thank you for making such a concise overview of the roadmap. I have a request - could you make a tutorial on implementing NextAuth and best practices with authentication in NextJS. Thanks.

@tigerseely3761 2 месяца назад

what about saas? for my case, the router/page frame structure of nextjs is confilicted against my requirement(the frame structure of login page and dashboard), so I used react-router and basically wrote everything manually - not using any framework.

@frankdearr2772 Месяц назад

great topic , thanks 👍

@MrBrandenS 2 месяца назад

Nice list. The only thing not mentioned was testing that would be worthwhile to know (Cypress, Playwright, React Test Library, Jest, etc), but other than that I feel like your were spot on.

@ByteGrad 2 месяца назад

Good point

@pablom8854 Месяц назад

The booking api, every flight is a json with around 500 lines of information, probably more, so typescript is mandatory so you can use all the type definitions.. imagine moving so much data without autocomplete... . I say booking but not exactly them, I have worked with another similar api.

@devs_nazmul Месяц назад

This is 100% Great Content, I'm 100% agree with you.

@victorh8863 17 часов назад

Web deving will hit a huge high in allowing people to characterize their own artistic talent and styling intricacies, giving a new era of lifeless AI a bit of hope for us mere mortals competing with machines.

@wesnguyen1331 Месяц назад

My name is Wesley and I’m learning WebDev too 🙂 thanks for the helpful video!

@jenilmangukiya525 2 месяца назад

Great Video Thanks😇

@ardianhotii 2 месяца назад

Very nice video, very well explained and very good road map , loved it all what you said and you make amazing content thank you !!

@ByteGrad 2 месяца назад

Thanks! Enjoy

@nasko235679 Месяц назад

As someone who's been struggling with imposter syndrome during my learning it felt good to say to myself " hey I actually already know most of that" (or at least the basics).

@zamanEhsani Месяц назад

after watching the first video, I am watching this and subscribed. you are awesome.

@arochomsky9254 Месяц назад

just came to say, that tell me when JavaScript developers learn to keep the things simple, and stop changing the framework, or the way you write your JavaScript, at backend we have been using the same frameworks over years

@humanbeing4319 Месяц назад

True!

@davidchandra8722 Месяц назад

Thats a long wait then

@KoreyMacGill Месяц назад

lol i'm a backend guy looking to up my skills in front end and it's true. seems like front-end is always shifting with "what's most popular" being what's "important" but javascript, html, css always come back as the core that they just keep morphing around. that said i am happy to see some (react, angular) starting to settle and grow more tenure.

@darkcss1054 Месяц назад

Front-end hasn't changed. If you want to do things the way people did in the 2000s you can, using vanilla HTML, CSS and JavaScript. However, if you want the new, more performant, more capable technology you will have to learn and adapt to it. Though I understand a backend language such as Python makes things easier as new technology is built on top of it as packages/modules and not an entire framework, however, the Python of today is very different from the Python of the 2000s as well.

@vladimirjovanovic3663 2 месяца назад

Nice video. Consider looking into Ionic/Capacitor a bit more, their ecosystem exploded exponentially over the last couple of years.

@ByteGrad 2 месяца назад

Will take a look, thanks! :)

@attractiveguy1568 Месяц назад

Using strapi or CMS as a backend , isn’t better idea?

@liambrock3242 2 месяца назад

Also: trpc for typesafe apis, Convex for database service, Clerk for auth 👌

@nikzaaaaad Месяц назад

Nice video, thanks!

@lana__4157 2 месяца назад

For React, subtle shoutouts need to go to Remix. Definitely a solid Next competitor especially if they add support for Server Components

@jasonm9825 2 месяца назад

Any good intro or course that you could please point me to?

@lumiuko Месяц назад

Unfortunately, there are very few Remix-oriented jobs

@manishnangliya8194 Месяц назад

How about learning atom state management library nowdays?? What's your opinion?

@PhilanJames 2 месяца назад

Love your JS course. Would you mind making a video on SolidJS?

@ByteGrad 2 месяца назад

Great idea

@kalib-code Месяц назад

Yep alot have change but im still maintaining component base react…

@codechange75 2 месяца назад

Sir please,reply on when we use next js as frontend and node js as backend end how we can manage our middleware code for protecting routes because I send token in response of login api and i got it in client components and middleware run on server how I can pass token to server please explain this topic

@gold-junge91 Месяц назад

Its really easy i have build an website in 4 weeks with user roles, thats ran an specific webscrapping task with file upload and Download. But i have never see so Bad documentation as on NextJS

@paulok4980 Месяц назад

may i know when did u get all of this new informations?? maybe platforms that i could use like twitter or something. i wanna stay updated for front end dev

@hamzarehman7057 Месяц назад

I'm starting to religiously follow this roadmap for couple of months and I'll get back once I do complete all the steps.

@humanbeing4319 Месяц назад

Well then you can expect " Next JS ❌" "Ups JXS ✅" The naked truth is that, every second new and newer framework and libraries pop somewhere around our mighty Earth !

@nathanfallet Месяц назад

I’m team Kotlin with Ktor for backend, and actually use it for apps and frontend too. Kotlin is the new JavaScript, you can use it everywhere since it’s Multiplatform (even compiles to JavaScript)

@rendivs925 2 месяца назад

should i become specialist or generalist on these day

@jochenruland1537 23 дня назад

Thank you for that. I never understood when to use next.js and when to setup a separate backend with express. Became pretty clear now. If you want any kind of feedback: don’t tell people they might earn 10k a month. It all depends on overall economy. And times are getting tougher. Your courses are great. Thank you for that. But learning software development is only one step on the way to become financially successful. Stay authentic. That‘s what makes your courses great stuff. ❤

@Hemantupadhayay 2 месяца назад

what you think you about Vue and Nuxt.Js ?

@hwapyongedouard 2 месяца назад

thanks man , i always watch your vides

@ByteGrad 2 месяца назад

I appreciate that, thanks

@markovracaricic9913 20 дней назад

Bootstrap isn't mentioned here??? Is there some specific reason or tailwind is the answer? Thanks

@Euquila 3 дня назад

i prefer var since it's easier to type. and don't often re-assign variables. when you code a certain way, varl/let/const no longer matters

@wdeath Месяц назад

What about HTMX? i dont want to learn js frameworks like react and next.js, can i do it with java spring and htmx and some extra js when need it?

@vishalsinghpanwar2972 Месяц назад

I am currently learning ReactJS, will start NextJS once my React foundations are little strong. Also experimenting a with Tailwind CSS on the side

@vitorac412 Месяц назад

Just stop and go try other stuff my friend. Dont waste your time

@vishalsinghpanwar2972 Месяц назад

@@vitorac412 why?

@gauravraut4468 Месяц назад

@@vitorac412wdym?

@user-ji5bd6pc6k Месяц назад

@@vitorac412what does that mean? Go do something else outside web dev?

@shauncs Месяц назад

thank you

@jamie_SF 2 дня назад

Great video thanks. I’ve been a salesforce developer for 12 years, basically Java but with many parts of the stack taken care of (database, hosting, styling etc..). I want to build web apps now. Do you think a react + next.js stack is a good place to start or would svelte and svelte kit be better? Looking to build great web apps without getting too lost in tech details. Thanks again 🙏

@ByteGrad 2 дня назад

Interesting. I'm biased and would prefer React & Next.js (that's what's my channel about) but there are people that love Svelte.

@jamie_SF 2 дня назад

@@ByteGrad awesome thanks. Maybe I’ll try both and see. React has so much support and info around it. I’ll def be watching more of your videos. Great content

@71co0k Месяц назад

Why don't I just use Webflow with its available "apps"? What can this multi library, hand coded approach offer in an advantage? Thanks.

@vjnvisakh 16 дней назад

You make great videos man.

@maratnikitin4460 10 дней назад

The backend part is missing C#/.NET and SQL Server.

@AlleinArk 2 месяца назад

dropping next js in 2024

@user-uv4zu8rv5o Месяц назад

I khnew backend is deep but why we learn all of this ? Just learn django,php or java.

@rawarg Месяц назад

I actually spent 5 years to learn and effectively use all the stuff you've mentioned in daily basis. I have 4 prod projects that are in various field of expertises and also actively employeed all this time from start.. I earn less than 1.5k USD a month. So what you earn(you've mentioned 10k) depends on where you work and where you live. 😅

@brajagopalmukherjee1588 2 месяца назад

How to earn ? Could u just elaborate on these more like getting job ?or getting client from where?

@TheCocktales 2 месяца назад

same lol

@ByteGrad 2 месяца назад

Yes, will make a dedicated video on this

@Blade_Dhruv 2 месяца назад

@@ByteGrad thank you so much, really looking forward to it!!! That's the biggest bug in our life at the moment 😅

@vishwanathnb128 Месяц назад

@ByteGrad waiting for the video.

@user-tf9jo4ls8p Месяц назад

Well explained

@kaialan01 2 месяца назад

Man i know all of these. Now how to earn xD

@stranger_life_ak4720 2 месяца назад

Start doing things rather than commenting here😅

@Blade_Dhruv 2 месяца назад

@@stranger_life_ak4720that's the only hard thing, how do we find clients? How do we get internship, that's something I struggle the most

@kaialan01 2 месяца назад

@@santra528 bro played uno reverse here 😂

@harddak 2 месяца назад

skill issue

@2gbeh 2 месяца назад

@softrn

@danielaeon2273 2 месяца назад

I agree with most of these but not Nexjs, tried it a few times and it is good for simple websites but not for web applications. Tanstack router, and code based routing is so much better particularly if you have complex routes and dynamic applications where SEO isn't a concern. No one seems to talk about the fact that server based routing means the provider needs to pay for CPU compute, good for vercel. It's thin vs fat client all over again why would you want to not use the clients CPU?

@erice.3892 2 месяца назад

i think docker would be an addition to this list at this point

@mtiganik 2 месяца назад

.NET C# not even mentioned as Backend framework!

@ByteGrad 2 месяца назад

Sorry about that, .NET is alive and well. Will upvote this comment for visibility

@louisik1 Месяц назад

(all us .net devs getting paid be like "sure kids, go learn all that alphabet soup stuff lol")

@Selbi655 Месяц назад

Bro thank you so much for this vidoe

@ByteGrad Месяц назад

No problem

@tonylab3105 5 дней назад

Thanks 🎉

@evanilsonp.8183 Месяц назад

What about docker snd some cloud service?

@millionairementor5727 2 месяца назад

Hi i completed frontend with react js now I want to dive in backend which I should prefer a node, express js or NExt. Js

@humanbeing4319 Месяц назад

Devin

@otisrancko 2 месяца назад

Will server components and server actions work after building and hosting the bundles on an NGINX web server Docker container?? especially in a SSR scenario....

@user-cf1oj8my3p 2 месяца назад

does Next,js is framework?

@farhan10ansari 2 месяца назад

I am already close In one year i have covered almost 70% of the things

@farhan10ansari 2 месяца назад

But only getting close to 1k

@ruslansergazin8239 2 месяца назад

Why prisma and drizzle? I dont understand this hype. They doesnt support DSL in migrations. I think that typeorm(for typescript) and sequelize(for js, but also has some limited support for typescript) are much better.

@indimerz 2 месяца назад

Feeling good to see how much i have been progressed. Im been learning web development from q4 2022 and full time from may 2023. I have learnt more than 90% of the things mentioned in the video. I love react/nextjs ecosystem with typescript and tailwind.

@user-ks8eu5yq5f 2 месяца назад

Can u help me? I wanna know how i can do it? I had done pre medical but did not get into med clg. I had a lot of pressure and i had to something so i wanna know.

@indimerz 2 месяца назад

@@user-ks8eu5yq5f yeah definitely. can you explain what you are looking to do in web development, and how much you know about programming.

@kasper369 2 месяца назад

What if you learned all these, How do you do freelancing with this? no fiverr or upwork.

@ivangechev4243 2 месяца назад

I guess that's the beginner tech stack so you're ready for internship or junior position? :)

@ob34915 Месяц назад

learn java or c# you will get job very quickly 90% of the entreprise code is in those two language just ignore node and nextjs are not used in banks and big finance company.

@loc5706 Месяц назад

HTML,CSS, SQL, JS, react, nextjs = 10k/mo?

@LifeWithRilla Месяц назад

I’m still seeing on majority of job descriptions React is more common than Next. Typescript definitely should be learned. The triad html, css, JavaScript for sure. Node for sure and an ORM definitely. But, I’m not seeing any other serious movement towards those other technologies on job listings it’s far less common.

@KongKunta-ky4ux 2 месяца назад

the timing of this video can not be understated

@Adjust91 2 месяца назад

I’ve been studying frontend about 3 years whilst working 60-70hr weeks. I’ve only just started picking up backend after spending the last few months doing react/next. I went with C# instead of PHP, did I make a mistake? 😅 I only started C# this week, and I was going to try PHP and also Python, to see which one I’d continue with.. does it matter which one I pick?

@darkcss1054 Месяц назад

I'm coming to the web development world with a Data Scientist background and I'd argue Python is one of the best languages for backend because there are lots of packages that handle pretty much everything you can imagine, so you don't have to build them yourself. For example, Streamlit is perfect for quickly prototyping data React applications. The only downside is that Python is not a language built with distributed computing and performance as the core concern. When people prioritize these things I've heard they use Rust or Elixir, for example.

@Adjust91 Месяц назад

@@gppsoftware thanks! 😅

@carolin9876 Месяц назад

First question you should ask yourself is what do you want to do? Build websites, build mobile apps, build games etc? Then choose your toolset accordingly.

@Adjust91 Месяц назад

@@carolin9876 appreciate that, definitely websites/webapps. Never been bothered by game dev or mobile dev.

@Filipp1139 2 месяца назад

Why not vue?

@phurbutsering4485 Месяц назад

What about HTMX?

@viky2002 Месяц назад

No separate backend ?

@MailsonWei Месяц назад

how about mobile app dev?

@Jacomini86 Месяц назад

Amazing

@nobody124... 2 месяца назад

i know this tech i am not getting jobs as fresher in india for web dev what to do give some suggestions please?

@Rabixter 2 месяца назад

If I already use Python as my backend, is there any benefit of learning Next js?

@ByteGrad 2 месяца назад

Yes, Next.js abstracts away a lot of complexity (e.g. server actions replace client - API endpoint communication)

@RaZziaN1 2 месяца назад

It doesn't abstract it, it replaces his backend.. If you have proper backend stick with it, if it's really small next is ok.@@ByteGrad

@Rabixter 2 месяца назад

@@ByteGrad I see - that sounds quite useful actually. Im a beginner with JS / TS / React so I dont fully appreciate the value of Next.js, but I can see how it would be useful for modularising the code.

@kirpi2019 9 дней назад

What about Blazor?

@ruslansergazin8239 2 месяца назад

I dont actually think that we need at least next 6 months care about app router in next js. I tried, and all component libraries arent built for server/client components.