Build and Deploy 4 Modern React Apps and Get Hired as a Frontend Developer | Full 10-Hour Course

[@javascriptmastery]

Want to land your dream programming job in 3 - 6 months? ⭐ JSM Masterclass Experience - jsmastery.pro/masterclass Become a Software Engineer. Guaranteed.

[@thefulgentgirl]

Thank you for this tutorial! Could you please add resources for 2nd project restaurant one?

[@iskokomianbouwy3275]

hey please the Assets DownGit of the second project is not their

[@carolc7249]

Thanks!

[@yasminebaroud3965]

I couldn't find the word to describe how much your tutorials are great, thank you so much for making all of this stuff.

[@muhammadharis2205]

He is just rushing towards writing code. Writing long css first and then fow html and show us the result which is extremly hard to absorb the concept. I don't how did you understand his video. I learned nothing just wasted my time.

[@Jeffrey7]

@@muhammadharis2205 Exactly what I thought if you just follow along you learn pretty much nothing..😅

[@muhammadharis2205]

@@Jeffrey7 yes these videos are for people who love watching coding, not learning! 😁

[@SityBuilder]

@@muhammadharis2205 I feel the same way, unfortunately. But if you just follow through, I'm sure you won't learn much, a little terminology and structure is probably all. What I'm going to do is play around with the code and create something a little different. Anything is possible with Google.

[@dabyss9052]

18:49 index component 02:02:44 mapping

[@wisdombassey2804]

Yet another Quality content. I have to say, this course is coming at the right time for me. I was just looking for a react frontend course.

[@javascriptmastery]

You got this!

[@manojkumarparuchuri5920]

Is this course for beginners

[@exploringcrypto6609]

@@manojkumarparuchuri5920 You should have prior knowledge of HTML, CSS and JavaScript.

[@kakakauhhh7562]

@@manojkumarparuchuri5920 you should learn html,css,js. after that learn node js. and learn framework like react,next

[@sleepnabox]

@kakaka uhhh I'm feeling comfortable with html. Starting css now!

[@xeroks646]

As a backend developer who knows nothing about React, this video is so easy to follow and gives me a deep understanding of how React works.

[@aditya205]

if we know only html and css, then can/should we learn from this video?

[@patrickdorado154]

@@aditya205 Up for this. Waiting for the response

[@Jashan.sidhu.855]

@@aditya205 kind of, but you will get many confusions and problems. i recomment you to at least learn javascript and some basics of nodejs.

[@Jashan.sidhu.855]

@@patrickdorado154 ^^ see my reply

[@badreddineboukheit9791]

@@aditya205 it would be better if you learn js first, the more js you learn the more you are going to find react understandable, don't rush the steps of learning

[@Rayan-hz9xo]

I really love this video! Still on the first project part but kinda felt overwhelmed by how much you planned everything without explaining how you arrived to those conclusions. Like the structure of the components and what you'll name them or how you named the classes before making the html. Could you also explain the part on how you planned it and why it's planned that way? just a suggestion as a beginner trying to keep up. but still, THANK YOU very much for the free course!

[@garrettturner5014]

Thank You brother! Excited to alter these projects and connect the back end! Cheers to you, your incredible skills and your teachings!

[@Ivan-yf2lu]

Bravo momak, na uloženom trudu i ogromnoj kvaliteti contenta! Jedan od boljih na webu!

[@ThourCS2]

I was going to do React JS projects this weekend and here you are. Thanks! :D

[@javascriptmastery]

No problem!

[@muhammadkhoirulumam7047]

I can get many amazing knowledge from this one, I mean this video is truly a high-quality content. This channel deserves more and more subs!

[@javascriptmastery]

Appreciate that

00:00 Build and deploy four modern UI/UX applications and create a developer portfolio 07:20 Learn to create a React application from scratch 20:34 Set up file and folder structure for containers and components 27:18 React allows for easy separation of components 39:52 Adding navigation links to the navbar 46:37 Styling sign in and sign up buttons 00:59 Created a responsive navigation bar 1:06:07 Building a header component with GPT3 and OpenAI 1:18:33 Style the button and header for a better look 1:24:31 Optimizing website for different devices 1:36:56 Creating a custom component for GPT3 1:42:54 Implement different styles for each component 1:55:23 Implementing the Features section 2:01:54 Implementing features section in React 2:14:53 Styling headings and paragraphs 2:21:08 Create a click-to-action div with a button 2:33:29 Implementing the structure for blog articles 2:39:40 Styling the article component 2:51:56 Optimizing article and footer design 2:58:22 Create a footer with links and copyright 07:41 Successfully built a responsive footer 3:17:06 Deploy a website on Hostinger's Fast servers 3:29:35 Learn how to install React Icons and access starter code for a restaurant website 3:35:32 Creating a navigation bar with links and logo 3:48:27 Creating a mobile navigation menu with a black overlay 3:54:43 Create a responsive navigation bar with React 4:07:02 Implementing a header section with dynamic title and styles 00:12 Creating an About Us and History section with images and text 4:26:18 Creating a special menu section for a fine dining restaurant website 4:32:57 Created a special menu with cocktails and wines 4:46:16 Optimized CSS for a wine, beer, and cocktail menu 4:52:57 Code out the Chef section 5:06:33 Create a video component with play/pause functionality 5:13:08 Create Awards and Recognition section 5:26:19 Creating a photo gallery with Instagram photos 01:07 Creating an image gallery with left and right scrolling buttons 5:46:16 Created a responsive image gallery with arrow icons 5:53:14 Implement 'Find Us' section and 'Footer' component 6:06:11 Create a newsletter subscription form with CSS styling and media queries 6:13:01 Implemented footer with contact, social media icons, and working hours 6:26:38 Completed the footer and website design 6:33:23 Learn how to build a professional website using React.js and Tailwind CSS 6:46:17 Create a layout for the application 6:52:22 Create reusable components for the application 7:04:56 Developers need to be able to read documentation on their own 7:11:28 Developing a responsive navbar and hero section 7:24:31 Created a circular button component with gradient and arrow icon 7:31:09 Implementing gradients and image on webpage 7:43:31 Implementing the business section 7:49:40 Creating reusable button and feature card components 8:02:38 Create a billing section with buttons 8:09:13 Creating a testimonial section 8:22:45 Implement call to action section 01:07 Creating a footer with useful links and social media icons 8:43:03 Learn how to deploy your website with Hostinger 00:51 Learn to create a premium custom portfolio in one video 9:00:57 Create a hero section with a section title, section text, and a call-to-action button. 9:06:46 Creating a grid of projects using React components 9:18:25 Create a Technologies section and a Timeline section 9:24:23 Create a timeline carousel with buttons 9:36:08 Completed portfolio website and deployed on hostinger 9:42:03 Deploy your website on your own domain with SSL certificate

[@mostafizurrahman2694]

A little tip: Don't write the CSS styles before writing out the HTML first. Don't define, import, export or do anything until you really need to. It gets hard pretty fast to follow through what and why you are doing something. 😇

[@Reinaldo123990]

Thanks for the advice!

[@oliviajenny9557]

Thanks for the advice

[@Grux]

That single handedly will make this channel the perfect react learning place. I got so frustrated the last time when Adrian kept writing the css classes before the html, it makes it hard to learn what made what look that way if you don't have prior knowledge.

[@pritam_dev]

Agreed

[@sqfzerzefsdf]

@@divpolitics9520 well you either go in with a planned layout based on a design or you end up refactoring your css twenty times over. no real point capturing that on cam though.

[@lekwapemamyala]

I had to hit the subscribe button and notification bell within the first 2 minutes of the tutorial. I enjoy the web dev videos that are not solely focused on coding but also on ux/ui design🔥❤🔥

[@404usernotfound-eo5yr]

Wow! As someone coming from a Django background, diving into React JS projects felt like stepping into a new world. But your content made it not just accessible but downright exciting! Your clear explanations and well-structured tutorials broke down complex concepts effortlessly. Thanks to you, I now feel empowered to explore React further and integrate it seamlessly into my projects. Your dedication to sharing knowledge is truly commendable and immensely appreciated. Keep up the fantastic work! 🚀

[@renuvelhal5154]

Did you make use of hostinger

[@HPComputer-eh8qn]

completed this tutorial without an single error.rare rare video on youtube thank you so much

[@0xpathak]

We appreciate your help for students and self taught learners. Your content are very helpful 🌱 💚

[@javascriptmastery]

Thank you!!

[@Himanshu-bc7zl]

Timestamps: 00:00 Intro 03:32 Modern UI/UX GPT-3 07:52 Project setup(App one) 14:03 Folder and File structure 28:10 Setting up the basics styles 36:23 Creating Navigation bar

[@animeshfreestyle]

how much time would it take to make all these projects

[@AmitPandey_10]

@@animeshfreestyle a week for sure..

[@nodebate1]

@@animeshfreestyle it depends how much u work on it, if u work 3-4 hours a day, you can built for 1-2 week.

[@vhongbercasio2030]

sir you are the one who gave some aspiring dev to develop and enhance their skills

[@StepHen-qq8uk]

We appreciate your help for students and self taught learners. Your content are very helpful

[@themindhelp9584]

JavaScript Mastery indeed!!!! thank you so much for uploading these videos!! you have no idea how much I've learned from them! thank you thank youuu thank you!

[@tauraichipurura8465]

@2:52:31 media query line 48 separate with comma between block container groupA and block container article

[@badreddineboukheit9791]

1 hour into the tutorial, I'm learning code style and some nuggets like that, but I feel this is more a code-along-me video than a tutorial, there is no explanation going on, and I see things appear magically in front of me, it's like you have another monitor beside you and you're copying stuff from it, sometimes you write the style before creating the class ... etc but overall, thanks a lot for this opportunity.

[@anzilcutzz3148]

Was waiting for your video 🔥🔥😁

[@priyanshupatra2100]

I just want to say, Hats Off To you Man for providing so many free resources. Awesome content dude❤

[@valchukwunwike2215]

This was an awesome tutorial with great depth and insight, well taught.Thanks for the good work.

[@subramanianchenniappan4059]

wow.. really great i am a java fullstack developer for 15 years . i will go thru this and get freelance projects

[@mcoria74]

Amazing!, I did my portfolio with this project and uploaded immediately to my personal domain, the next step will be work with the content, but for now my portfolio looks beautiful, thanks in advance.

[@bluesky-vc3tk]

Is it possible to consider it as a portfolio?

[@baadiyowch7390]

Did you find a job?

[@mcoria74]

@@bluesky-vc3tk Of course yes.

[@mcoria74]

@@baadiyowch7390 Yes, I got a job at UnoSquare company as software engineer :)

[@sebastianniga6797]

Bro, this is honestly the best React tutorial I have ever seen. Congrats...

[@siwy6493]

you havent seen code with antonio than hes making better tutorials (its my opinion so dont cancel me thx)

[@snowman2916]

This is not a tutorial. This is a code-along and I can guarantee if I gave you a technical interview after you watched this video you couldn't regurgitate any of the information to me.

[@earlgfps]

I love your contents brother. Can't wait to complete and practice this course. Also can't wait for another react native videos brother. Well Done!!

[@javascriptmastery]

More to come!

[@AhmadMaartmesrini]

Timestamps: Project: GPT4 SaaS Project Files Structure 00:14:00 Navbar 00:36:20 Header 01:05:50 Brand 01:33:47 What's GPT4 01:38:20 Feature component 01:48:18 Features 01:59:28 Possibility 02:11:28 CTA 02:23:44 Blog 02:33:22 Article component 02:37:24 Footer 02:55:37

[@sridhar7251]

hey could you tell if this video is upto date.. as in even now if we do it there wont be issue of react versions and shit a lot!!?? please

[@imsantoshsingh]

I just buy Hostinger plan from your affiliated link to appreciate your awesome work... thanks

[@javascriptmastery]

Awesome, thank you!

[@viniciusm.m.7822]

Love u, man!!! Thanks! Forte abraço do Brasil! God bless you!

[@javascriptmastery]

Greetings to Brazil!

[@talebulkawser5865]

Adrian with the best builds on KZbin, although they were posted before but it'd still help the beginners. Anyways, can you please make tutorial on how to make a fullstack web app for a fashion designer where a user can choose from the clothing designs displayed on the web and can also chat with the designer after chosing a design. You can use whatever technologies you want. I think this is a pretty good build idea.

[@mindblowinglifehacks2471]

That will be an educative one

[@mindblowinglifehacks2471]

Could you kindly help with that!

[@talebulkawser5865]

@@mindblowinglifehacks2471 fr..😅

[@javascriptmastery]

Great idea!

[@josephcudjoe956]

Will be much helpful I think, will be expecting that in action right after this if you don't mind

[@coolgundu]

You have put so much effort, thank you for giving back

[@amitp05]

Hats off to your consistency👍

[@javascriptmastery]

Thank you!

[@aamotta]

Thank you very much for taking the time to make these projects and explaining how to do them, you are an excellent creator, much success machine.

[@blackwolf542]

I wish I could smash the like 1000 times and it count. Your tutorials are just so helpful. Thank You so much for what you do.

[@aotearoaadventures9629]

Awesome projects and so clearly explained. Made so much sense ❤❤❤

[@BinanceAddicts]

Great works great team... God bless you

[@javascriptmastery]

Thank you so much

[@BinanceAddicts]

@@javascriptmastery always welcome sir... Building my UNISWAP Web3.0 clone soonest... Will come back for questions 😉 😂

[@knightrider192]

You are a saviour a blessing ❤️❤️❤️❤️❤️❤️❤️

[@studyafa7159]

3:32 Modern ui/ux 3:21:28 Restaurant (css skills) 4:27:15 5:06:00 6:36:17 Hoobank (tailwind) 8:49:24 Portfolio

[@durgashukla240]

4:50:42 this column setting is not applying in my device 4:54:48 chef Laurels 5:17:00 -(DOUBT) 5:20:00

[@studyafa7159]

​@@durgashukla2405:15:00 video is not playing.....😢

[@nguhelon7015]

Woow This Is Just Beautiful, Another video again with so much helpful content. Thanks Again!

[@javascriptmastery]

My pleasure!

[@minal4801]

Thank you so much @Javascript Mastery .... because of u i got internship+PPO as hired as web developer 🙏🙏🙏🙏🙏 ... tysm for u free projects ..... I'll keep building project's 😅

[@javascriptmastery]

All the best

[@minal4801]

@@javascriptmastery thank you ....also make one course on modern javascript

[@egbecharze2780]

I have not even watch the video but l have subscribed, liked & shared it among my friends

[@javascriptmastery]

Thank you!

[@typicalmolly7737]

this is next gen courses man, like I cant believe someone really got a whole ass 10h course

[@Baelfyr]

Well, I think its time to make myself a portfolio website, and this video and deal has pushed me over the edge to get it done. I used your code and signed up for 48 months. Now to follow the video and implement my portfolio.

[@dumitruradu9948]

Just wow 🎉 . But we need to remind ourselves that to get hired we need to practice practice and practice a loot to code ourselves. Cause that’s the only way to actually become a good web dev.

[@Hxzzx1]

Lovely course man , yet to finish 💙

[@mounikathalla3440]

did you finish ?

[@SwapnilPantOfficial]

This video was actually really really helpful to me. Thank you for this video. This video really makes you learn through making the projects and with it you learn the best practice you should do to get industry ready. You are a really great teacher .

[@snowman2916]

How's "industry ready" treating you? You get a job yet? Or did you just watch a few more code-along videos and then fail your technical interviews because you don't understand what's happening?

[@mehdikhoshsavartehran7061]

thiiiiiiis was the only thing that i reallllllllllly needed . thank youuuuuuuuu

[@sahilverma_dev]

Your videos are really great.Thanks for making such quality content.

[@javascriptmastery]

Glad you like them!

[@MrCamdere]

This is it man ! wow , wow, wow so much stuff so much to learn and hard work ! Thanks bro

[@javascriptmastery]

My pleasure!

[@hamzaechchabli8132]

i have been searching for this for long time thank you so much

[@mahadabdurahman]

I love your contents man. So informative.

[@javascriptmastery]

Glad you like them!

[@WiLDeveD]

Best in Quality and Quantity is JavaScript Mastery Channel. Thanks Bro , God Bless You and keep going full power.

[@javascriptmastery]

Thanks and welcome

[@mwafrikajosue6756]

Great content. I 💕 this

[@javascriptmastery]

Glad you enjoy it!

[@EchoesofthePast09]

you gotta add translations for other languages man you are the best

[@anwarhossain9769]

You are doing great. ❤️

[@javascriptmastery]

Thank you! You too!

[@hamidhamri5384]

You are unreal my dude , ty

[@javascriptmastery]

No problem

[@jingli9232]

awesome video, hope to get more tutorials with no starter code, cause this is also part of setups

[@angurumouli5437]

is it useful for new react learners ? could you tell me please

[@jingli9232]

@@angurumouli5437 not for newbie, but you can try

[@mahadabdurahman]

Can't wait to complete and practice. Much needed videos.

[@javascriptmastery]

You got this!

[@TeachMeLee]

You done yet?

[@danielotienoke]

Great work! Looking forward to Vue tuts in the future.

[@javascriptmastery]

More to come!

[@SarveshChauhan]

Best Channel on React application appreciated man looking forward for your Mobile app

[@javascriptmastery]

Appreciate that

[@Trentvucich]

Hey guys Newbie here, I got lost when trying to make all the files and folders 1 hour in, and completely butchered the code. Pretty frustrated, but ready to attack it again. New day lets get it!

[@heathery2997]

Thank u very much! Was very helpful!

[@projectIranm]

I'm testing BEM + Tailwind and it's working fine, I've learned a lot of tricks with this video

[@nurmuhammadnosirov7221]

Great we were waiting!

[@javascriptmastery]

Glad to hear it!

[@webicahr]

Svaka čast na trudu!

[@javascriptmastery]

Hvala!

[@MasterMathematicswithMatthias]

its free and a lot of effort. thank you very much.

[@dainius84]

Real appreciation for the person who did this course. But definately it's not a course, it's just someone making a website without any explanation of his steps :)

[@Vikram.Thakker]

I use Elementor and saw this video out of curiosity, and the thought that crosses my mind! Why go through such a pain of coding when a software like Elementor exists!

[@israelbosun4032]

Hello Adrian, great tutorials in this video, really great. Thank you for this. I love it when you say "let us view this website in its full glory". Really amazing tutorials. Thank you once again

[@Yaro_x]

Hey man, i used to think colt steele was my best web dev tutor until i come across ya tutorial. Thanks man you've done miracles on me.

[@adeelahmed8991]

Great video! Thank you so much. I love hostinger as a service! I have one tiny suggestion, we shouldn't use more than one h1 tags per page because it's a very bad practice for SEO

[@SureshKumarIn]

"Putting an end to the worries of the webmasters, Google’s John Mueller has confirmed that the Search Engine Algorithm of Google doesn’t have any issues with a page having multiple H1 tags. He also added that Multiple H1 tags, if the users find benefit from having it on a page, is perfectly fine." quoting from stanventures and multiple sources

[@v.demchenko]

Thank you! Man, your channel is amazing.

[@thetech3624]

This looks amazing! Thank you! I just wanted to ask, are you sure this can be used for applying to jobs? Since we’d be coding along with you and they aren’t really our projects. So would this just be some training for us before building our own projects?

[@javascriptmastery]

Absolutely. But add something to the projects to make them your own! :)

[@tapaskumardey650]

​@@javascriptmastery But cannot understand what extra shall I add ?

[@rawc]

I'm learning ReactJS for website development. Thank you!

[@VamshiRangisetti]

50 minutes into the video and I can't thank Tailwind CSS enough for its existence.🤕

[@xlop1438]

Woaahhh... Wonderful Channel..

[@Valokurasta]

Hi JSM, I have a question. It might be a sponsoring thing, but lately all of your tutorials have React as their framework. I would love to see tuts where frameworks like Vue are being taught aswell. Is there any chance you would step aside the React framework anytime soon ? :)

[@javascriptmastery]

I'll see what I can do!

[@andresmontero7481]

​@@javascriptmastery nah man keep React coming in! It's great!

[@Toxicflu]

More React native is always welcomed!

[@bharath2508]

This is the best portfolio website tutorial.

[@adediranoludare6530]

In timeline 56:55, what is the function of the classname="gpt3__navbar-menu_container-links", I can't find any reference to the "gpt3__navbar-menu_container-links" in Navbar.css, when I removed the classname="gpt3__navbar-menu_container-links" everything still worked. Am I missing something?

[@aliarman4105]

Thank you very much as a cs student you help me a lot Allah keep you always happy

[@Doyextech]

I wish I could send some money to appreciate 🥺... But I'm just a student

[@javascriptmastery]

No worries, it's completely free! :)

[@irfanyousuf17]

@@javascriptmastery you are a gem 💎

[@Doyextech]

@@shuaibkhan8525 sure!😅

[@gambomaster]

You can still buy his courses to support him. 👍

[@Doyextech]

@@gambomaster I specified that I'm a student, whereas the rate of conversion of ₦ which I spend is high to $

[@touhidurrr]

Thanks for the video! Hopefully, it will make me a React master in one day!!! I am going to try following the video line by line and see what skills I get after completing it. I will try to update this comment later. Drop a like if anyone wants to know the updates. Bye!

[@javascriptmastery]

You can do it!

[@fahadhossain4999]

So how did it go bro?

[@mindblowinglifehacks2471]

That's incredible, Our appreciation... i always keep counting for when today will be due for an amazing content like this. Finally it is lively displayed

[@javascriptmastery]

Thank you so much 😀

[@tanyashylock7957]

This is not a tutorial, this is 'copy my code and, IF it works, great.' There is NOTHING that explains benefits of component-based design, your CSS styling (which few beginners would understand if they don't just simply copy and paste your code), or deployment on any platform other than your sponsored Hostinger. No one who adds this to their resume will be able to explain how React works with a virtual DOM or anything essential to fundamental React principles. Garbage. Snazzy sites, that's about it.

[@MorphTW]

Exactly my thought. This is just a "let's play" video.

[@vanshmakhija8360]

I have a little bit of knowledge about react should i watch this tutorial ?

[@robertolivares4700]

@@vanshmakhija8360bro reread his comments and come to your own conclusion. He’s saying it’s not really a tutorial

[@eternalEclipse999]

I think using tutorials to learn react isn't appropriate You should refer to the official react documentation to learn react Then after you grasp atleast the basics then you can start watching these videos

[@rashidshaikh8161]

Ofcourse this video isn't for beginners! He gave extra information if you don't know the concept that he just told in the video! If you're te beginner, then you've to learn it first

[@joel9909]

HAPPY NEW YEAR CHAMP!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@convictionindicators]

I always have problem completing your courses, you never get the errors and even the VS code doesn't pops up for it even if you are writing a typo the code gets accepted this is not fair, I am struggling to code but your course has made it more difficult and irritating, TODAY I UNSUBSCRIBE you and never to return back again. You are using ultra long nomenclature for class names which is very confusing for beginner, you don't seem to care thats all.

[@firstacc5442]

Excited!!!!

[@kgo5517]

First

[@javascriptmastery]

You are!

[@rajchoudhary4546]

You changed the my life ❤❤❤❤❤❤❤

[@CarolineAbreu-mi4gg]

project 1 00:07:44

[@sridhar7251]

hey could you tell if this video is upto date.. as in even now if we do it there wont be issue of react versions and shit a lot!!?? please

[@mushfiqurrahman8193]

Thanks!!! Learned so much things from this video........

[@dumitruradu9948]

What I like to know more is your vs code set up and what extension are you using!! We need a video on that as well!!!

[@santasahithi4789]

Thank you soo much for this video I learned react and how to make a whole website using your tutorial. Thank you soo much

[@varunsharma3481]

It's just incredible loved it ❤️

[@javascriptmastery]

Thank you!

[@rohitmetya5002]

Can a beginner start with this and understand?

[@DanielOliveira-vh4ye]

The best react content that I've seen 👌

[@AhmedMohamed-kb1qs]

Words fail to thank you I owe you all the pride and honor for you and your wonderful effort Forward and in progress day by day 💯💯💯❤