Build and Deploy a Fully Responsive Modern UI/UX Website in React JS

[@javascriptmastery]

Build even more professional projects, add them to your portfolio, and land a job! www.jsmastery.pro 🔥

[@fishinghunter4030]

This was a cool project. I learned something new, but when I did the build, all the href's in the head section had a forward slash that had to be removed (href="/favicon.ico") in order to get anything. I also can't get any of the png pictures to show even though it's there when I inspect elements.

[@babbagamevers3782]

He's on react lol

[@ursisterbtw8572]

I've only just started my coding journey about a month or so ago, but this was hands down the best project tutorial I've gone thru so far. Thanks so much!

[@raufukiwala]

I cannot thank you enough. for some months now, i've been studying react but somehow i've been struggling till i found this. Am proud to say that now i feel comfident that i can handle atleast most static react website, also my CSS skills got polished far more than when i was learning basic html. I'm about to kick start my fleelancing career by building a car rental website for a certain local business using the principles in this video. thank you once again. God bless

[@javascriptmastery]

I love your comment! May I use it as a testimonial for my upcoming course platform? :D

[@raufukiwala]

@@javascriptmastery by all means, you can use it in your testimonial, it will be an honour for me as well, thank you so much.

[@javascriptmastery]

@@raufukiwala I'm so glad to hear that! Would you please share your email with me so that I can reach you? :)

[@raufukiwala]

@@javascriptmastery No problem, i will DM you if possible

[@javascriptmastery]

@@raufukiwala you can contact me at [e-mail]

[@VijayYadav-pd4qo]

Hi Sir, Like you said that instead of keeping this course paid, you kept it for free. It means a lot to many people, and I appreciate your work very much, it means a lot to beginners like me. I sincerely thank you.

[@pranayyadav7712]

Man, I cannot thank you enough, just when I finished your last build, I was searching for a new one, and here it is. Thanks a lot !

[@javascriptmastery]

Enjoy it! 😊

[@yasiransari8981]

If you can't , then don't... Be happy...

[@ankitbhardwaj7363]

Bhai 10k likes karwade is video pr, ek aur project video bna dega ye

[@akashpaul4143]

@@yasiransari8981 What do you mean ?

[@EfosaMichael]

You have just raised the bar for FE development tutorials. Please, keep making tuts like this with a modern/solid UI.

[@javascriptmastery]

Will do, thank you so much!

[@akshaymishra5263]

Adrian, I can't thank you enough for the content you're giving us absolutely free of cost, your project courses were one of the reason my react skills got polished and I was able to get job as a react dev around a year ago, I've moved to backend side as a developer but still go through your videos, there's always something new to learn. thanks alot and God bless💪🏻♥️

[@javascriptmastery]

Thank you so much! I wish you all the best! ❤️

[@gauranshjuneja8855]

Hi Akshay ! I am currently making an ecommerce application using MERN stack . I wanna know how much knowledge do I need before applying for internships because I always feel I should know more . Thanks !

[@lesjane802]

hey lets network would love to pick your brain i just got certificated for full stack development

[@akshaymishra5263]

@@gauranshjuneja8855 you'll always feel you're not ready for internship/job, don't think much about it, just apply asap

[@shubhampawar9]

Hi Akshay ! Can you please share your experience, how you managed to move backend while working as front-end developer. How did you study

[@Matin1999_T]

I've seen lots of good stuff on youtube but nothing was as brilliant and magnificent as this 3 hour and 21 minute comprehensive and perfect React tutorial by Adrian. Words can't express how thankful I am. Watching your tutorials and free projects shared by you on youtube was one of the best decisions of my life so far. The presentation and words are clear, understandable and fluent enough for any learner. The timestamps are absolutely a nice idea from KZbin and thanks for making use of them cos I've seen lots of tutorials where the educator didn't find this feature helpful which is not a good news for us, for viewers with no doubt. The roadmap was clear and enjoyable for beginners like me and the fact that you're teaching how to make a cool "modern" UI/UX free, just makes this tutorial's perfection doubled alongside our satisfaction. So I'm just gonna give it a like and praise your work and wish you the best in your next projects and tutorials. Thank you so much.

[@javascriptmastery]

I appreciate your comment so much Matin! Thank you! 😊

[@PipatMethavanitpong]

This is a really nice walkthrough building a static site using React from scratch! The div container and flexbox did the magic making writing CSS easy and responsive. Although I have used React daily, I don't have solid ground on using CSS, because I work on top of Semantic UI and Material UI. I feel more comfortable writing CSS by myself after watching your video. Thank you!

[@phillpeters]

I rarely like, comment, or subscribe but this course is so valuable and so exactly what I need right now, how could I not? Everything you mention in the intro are things I've been meaning to get better at. Thank you very much for this!

[@javascriptmastery]

Thanks Phil, means a lot!

[@jerkozlopasa8596]

I thought the same thing in the first five minutes!

[@IrfanAhmad-bn6ky]

Thanks!

[@danhvo2931]

Thanks God you are here! I have just finished the entire this tutorial and learnt a lot of from this masterpiece. This is my first ever completed React project. Really appreciate your amazing work!! Thank you so much!

[@javascriptmastery]

I'm so glad to hear that Danh! Many more to come!

[@KylerEdginton-e6p]

lol all the excitement and pride in that first “hi there!” 😂 I’ve been looking for a good figma to web video this is great

This guy delivers... Massive effort, bold, calm, and on point, the information is presented in a coherent way. Subscribed, following, and very happy to watch the good stuff.

[@anthonysemoulin657]

Yy😊u ynt😊yk😊 Y Yyyky’u 😊😊y😊y Uyu😊 Yy😊urine u😊 Et yu Et 😊yuy😊😊kyy😊😊yyy😊😊y😊unyy😊y😊yk’uy 😊Yy😊yj😊😊yy Yy😊yj Nuy😊yyky😊😊yy😅u😊😊😊yy Unyy😊yj😊yy’ 😊😊 T😊tyyyy😊 Yyy tû t’y Yyyyyyuy Y😊😊yy Un

[@thebks1]

Everytime you say "Great" I just know you are done with that part and I have to pause the video and try to implement that part in my project. I just wanna say your work is awesome and its making me better and better in JavaScript. Thank You

[@harrydaniel3801]

My first 14 minutes. I like your style of explaining it step by step. Great job!

[@javascriptmastery]

Thanks!

[@CodeXAnandFullStack]

Adrian, here i am from India, i dont know where are you right now, but i am praying to God to give you everything that you want because i am blessed that i am learning soooo much from you, you are one of the resource person whom i always searched for, thank you sooo much for giving such a wonderful way of teaching of web development. 🙏

[@mudassirsayed8703]

This is what everyone needed❤

[@javascriptmastery]

So glad to hear that!

[@100feetroads4]

Mudasir aesa koi channel bato Jo Urdu mai ho aor ya technology Urdu mai bta ra

[@mudassirsayed8703]

@@100feetroads4 dont know bro

[@WaddupBoi]

I was going through a bunch of different React beginner tutorials on KZbin and found your video to be leaps and bounds better than others. Your explanations in particular felt like it came from a real teacher and not just a developer who knows how to code and decided to make content.

[@brandonzane519]

Dude what steroids are you on. We can't even keep up with the quality content anymore😂. Amazing work🙌🏾

[@RockstahRolln]

LOL!! Good question! Brilliant content here!

[@jovan4614]

I agree, i have already few on my list for later

[@viallymboma9874]

He's too fast 🤣🤣🤣

[@Deathfreeze14]

It’s amazing, I just started react on Udemy and I had to pause cause this video came up on my recommended and was compelled to finish it the more I watched. Such crisp and clear explanations, and I appreciate him removing the industry fluff of most courses (decencies), so that the average beginner can truly follow along.

[@codeaperture]

Mahn we ain't ready 😅

[@deathbombs]

Cool tutorial, making website design easy for everyone. I will say that I found the where they start or end very unclear since they're all so close to each other- so there's many mistakes while following

[@boriszolah3770]

You are a hero. Thank you for teaching us, Senpai.

[@ApurvKhare]

I have seen great developers and then I have seen great innovative video creator but I have never seen a great innovative developer video creator. Take a bow.

[@javascriptmastery]

Thank you man!

[@dragoshjianu]

Hello and thank you for your time and effort to give us this tutorial for free. I want to give you some feedback regarding CSS - try to be more organized. 1. Use the mobile-first approach. Less CSS will load first and if needed extra code will load. 2. If using BEM, I would use SASS. The code will be much easier to read and will be more organized. 3. For the next project I would use also styled-components.

[@motivasyon_art]

I need so much new perfect project from you and please hurry up. I'm Turkish people, my english is low. But you are speaking very clear. So i understand you so beautiful. Keep moving right here.

[@programmingwithjavascript3579]

Teaching is an art but you are magician of it. Not many people able to teaching such Complex topic. 💞🙏

[@javascriptmastery]

Thank you! 😊

[@PriyaB-n7f]

Amazing video - I have been watching so many different vids and this was by far, the most amazing one. You explained everything so well, even for someone as confused as me! It's great that this was free too - thanks man.

[@gabrielntera5679]

As always, when he comes with a content it's really a content and as always very well explained

[@javascriptmastery]

Glad you like it Gabriel!

[@lyricisssongs458]

I would give you an award for "THE BEST REACT TUTORIAL 2021(EVER)"

[@chigozie123]

Protip for anyone who plans on doing frontend work in the future: Stop writing CSS by hand, and start learning how to use css frameworks. My favourite is currently tailwind. Another one that used to be popular is called bootstrap. Bonus tip: Learn how to use CSS post processors such as cssnano, and autoprefixer. The combination of these two will give you cross-browser coverage, and smaller css files.

[@niklasanesen5096]

true, anything else? like tips or advice?

[@chigozie123]

@@niklasanesen5096 learn typescript and get familiar with a popular Web framework (in order of popularity): Angular, React or Vue

[@michaelsavinetsky7437]

This is one of my only comments in youtube , this video deserves a like and sub , well done Adrian!

[@kalpeshmali1476]

wait ! i was searching for that type of tutorial yesterday and you uploaded this video today isn't that strange adrian ? 🙄 🔥🔥🔥🔥🔥

[@javascriptmastery]

It's a bit strange! 👌

[@shaisssss]

You are not just coder your way to describe and teach also on next level.your soothing voice with beautiful words add ever lasting flavour to videos. Thanks ❤

[@lavishpalia9286]

Absolutely amazing project for beginners and there is so much to learn from it. Thank you for this 💛

[@javascriptmastery]

Thanks!

[@shazam314]

@Ivan Petrov Yea, you want to bring JS to HTML instead.

[@FlavienGascard]

This is awesome! I know I am kind of late to the game, but for my learning journey - I like to follow along and code either at the same time - or right after a concept. My advice is: When coding, sometimes you have the browser on the right side blocking some of the code while I am following along (you can only see part of the line) causing me to continually look at your repo for the completed code. Other than that - you are making my journey through my full stack development possible! Thank you!

[@atulsharma6296]

I m amazed by your efforts ❤️

[@javascriptmastery]

Thanks! ❤️

[@Radanubis]

For all you "Live-Server" extension users' the extension doesn't work with react.js. So I recommend downloading an additional extension called "Save Typing" on Visual Studio Code. It autosaves whenever you type or change something in your file. Works like a charm and saves you from constantly manually ctrl-s to see the changes

[@frontend_notes]

Amazing work, thank you so much for "good practices" and so much value in one video💪. Just finished with you and currently adding this masterpiece to my portfolio 😍

[@darpananeja4751]

This is a monumentally important resource for all the developers out there. You have a done a massively significant job for us. Hail developers!!!!

[@percivalianmuico8157]

I love the quality tutorial contents! Keep the amazing tutorials coming 🙌🏾

[@akpeghughuandrew6270]

I didn't believe this guy have a university as a youtube channel this is amazing I am subscribing and I am following you through out every week.

[@hemangshrimali6308]

This is great thanks. Your UI skills are really amazing

[@javascriptmastery]

Thank you! ❤️

[@Ayydos]

brooo you are pumping out these epic builds faster than I can keep up!! Please keep them coming, learning a lot

[@jmilthedude]

Very nice tutorial! The only thing I would critique is that I wish there were more explanation on the "why" we do certain things inside the CSS. Like all of the various settings you chose. Though, that information is probably more suited for a CSS tutorial I suppose. Awesome job regardless! I have learned a lot!

[@amiralizargar5051]

Fantastic , it was the best tutorial ive ever seen!! , best wishes budy!!

[@karim-dev77tch92]

Thank you very much Thank you very much Thank you very much Thank you very much Thank you very much Thank you very much 👍👍👍👍👍 You are the best.

[@javascriptmastery]

You are! 😊

[@AnthonyObi-wr6ro]

followed this course from the beginning to the end. Awesome project. i love the layout of the folder structure. Thanks

[@spaxxvilejohn9095]

Awesome tutorial. Beginner Friendly. Maybe for the next series you can use styled components so that we can see that too. The problem with classname is that they tend to override each other in terms of styling when you make a mistake of giving different components the same classname. Thank you.

[@beta9996]

yes, please !!! Would be awesome if you start using styled components in your tutorials👌🙌

[@invictuz4803]

CSS methodology is the biggest issue for me with any project, yet is the least talked about topic in tutorial videos.

[@spaxxvilejohn9095]

@@invictuz4803 I understand. Well I think that CSS is very broad. I have seen the same styling effects being done in different ways. That's what makes CSS tricky. It doesn't have a definite structure. But it gets easier and better with practise. You can use W3 Schools to help you practise 😊

[@muhammadyasir8880]

Awesome chennal and awesome tutorial

[@pastuh]

00:24:00 you can press CTRL+D to select all occurrences. If only 2 words is selected... Just double click on word and press CTRL+D again :)

[@aisimplified2]

Awesome truely awesome 😘😘😘😘😘

[@javascriptmastery]

Enjoy it! 😊

[@lehoanglong9794]

I just finished haft of video react tutorial 10 hours, and I saw this video. In just 3 hours I can have a basic understanding of React, practice CSS. so great

[@MrProxy10]

💜💜💜Love Ur Videos🔥🔥🔥

[@javascriptmastery]

Thank you! 😊

[@levihalperin7649]

You are making these quicker than I can watch them 😂

[@javascriptmastery]

Should I slow down? 😂

[@levihalperin7649]

@@javascriptmastery no, but you should share some of your brain enhancing drugs with me so that I can keep up!

[@gbh1998]

@@levihalperin7649 you can watch with playback speed 0.75x it's actually perfect!

[@matthewlau4067]

All I wanna say is "wish I would have found your channel earlier". As I am learning React now. This is Such a phenomenal, generous and extraordinary content that lights me up. I would like to thank, like, and subscribe thousand times !!!

[@jeffrey5718]

my sign up and sign-in in the navbar dont stick to the right like yours do. In 1:05:04, you have your .gpt3__navbar-sign floating to the right, which I cannot replicate even after copying and pasting your navbar.css code from github. I think you either had something that you have done which you have not committed to github or I did something wrong somewhere? edit: nevermind, I messed up one of the div tags in navbar.jsx

[@manny8816]

These videos are amazing, after a handful of projects completed and a few of my own creations, I should be able to stand out a lot more on my cv and set myself up better to secure a job.

[@amitp05]

Love this

[@javascriptmastery]

I'm glad to hear that! 😊

[@agustinrosas9675]

Your videos are so professional, bravo sir....bravo 👏👏👏 I learned so much from this, not only what you had too teach but anything that i dont understand i can get from the docs. Thank you

[@luxi1415]

It takes me few hours total to done this project.i haved change the elements and title gpt3 in something else.i love it

[@chukwusabastine6733]

i can't say how much i love it when youtube sends me a notification about a new video droped by javascript mastery, building a projects by following your tutorials have made me feel comfortable to say i am react js developer all thanks to you man. i just wish i can see your face in the up coming videos please

[@javascriptmastery]

Maybe in the future! ❤️

[@brianparker3532]

I am absolutely stunned by the quality of this content. You are a gifted teacher and I thank you for making this. The next coffee is on me!

[@javascriptmastery]

Thank you Brian. I appreciate it! 😊

[@shivrajnag12]

I am not done with your previous project and here you are once again.

[@javascriptmastery]

Thank you!

[@MrBrownC]

Hello, what about using tags for navigation links? Is it easier with the tag? Also, what's better for accessibility?

[@javascriptmastery]

Yeah, you can do that! 😊

[@borakaraca5480]

Wow! Just, wow. Amazing looking UI. Came acrosss this channel while randomly browsing but damn. High quailty content. I just subbed right away. 😍

[@javascriptmastery]

Thank you! 😊

[@naj_skcir]

you're the best. really helps me a lot to learn. been frustrated before because im not confident with React. thankfully i found u

[@maziarparsi9886]

WOW, i have seen so much tutorial on youtube but jeez you are on another level Adrian! keep up the good work

[@hamzahmd_]

Amazing tutorial. It has everything required for a frontend developer to learn. I do recommend every frontend developer to get inspiration from this KZbin Channel.

[@YolunSonu1]

I think writing the CSS styling before creating the classes is something that you will rarely do. That was mind-blowing.

[@imreboloni2921]

Thank you Adrian, I really appreciate you'r works here on youtube, you'r content are such amazing and helpful ❤‍🔥

[@garikmelqonyan6011]

Thank you for this valuable content, Adrian. Your videos are among the best ones on KZbin.

[@rbedson8965]

thank you from the inner heart, i was deeply in need of it. much respect to you as its free that barely few people do nowadays

[@Michael-jj8hu]

One of my favorite channels ! Thank you sir

[@javascriptmastery]

Thanks Michael!

[@ibrahimmohammed4267]

Your channel has become my Netflix, You're really awesome , thanks.

[@javascriptmastery]

Aww, so nice of you to say that, keep it going! 😊

[@thebooktutor]

this is looking so much better already

[@last_hits]

As a software engineer, this was fantastic guide from beginner to advanced!

[@yerkozuniga7523]

oh men, i just do not have words to thank you for this tutorial, im not a English native but i can understand everything, and this help me a lot. so thank you and bless.

[@thxlib5054]

This video is insane I love how you keep this much quality in this videos

[@MrWannaBAlone]

I love your tutorials! I've watched lots of tutorials on KZbin, but yours are the best! Good pace, lots of things to learn, have the LEAST bugs, and your debug session is also phenomenal! Have I mentioned your voice is also the best? Not too hyped, not too boring, and easy to understand! Please keep up the great work!

[@abuzarkhan238]

holy moly! give this man a glass of milk... definitely the best tutorial on modern ui

[@harisiftikhar678]

Bro seriously i think soo faar exactly the best video anyone can find on YT ♥️

[@javascriptmastery]

Thank you Haris! ❤️

[@piyushharsh01]

Dude your initiative is great!

[@javascriptmastery]

Thank you!

[@droneadventures.731]

Oh man! First that long tutorial completed, it was a joy to watch your work, thanks a lot, great job.

[@abdullahajayi]

Thanks so much for releasing such valuable content on youtube. More grease to you elbow man.

[@MichaelBrown-vq4fd]

This is amazing. "Thank you" feels like an insult for all the work you put into this.

[@benzaitabderrahamane6338]

thanks man, this was hands down the best of the best reactjs tutorial

[@chukwukennedy7035]

You literally blow my mind each time I click to watch your content, your step by step detailed compatible informations are really amazing.. how do you do it..

[@zubairzafar480]

Thank you so much for making this awesome tutorial. It took me a week and a number of bugs to code this website along with you. I thank you from the bottom of my heart. Thank you for making this wonderful tutorial in which we actually build a project.

[@saqlainmushtaq9454]

Kia yeh internship k lye bnani chahiye

[@zubairzafar480]

@@saqlainmushtaq9454 definately

[@mdfaiyazulhussain8752]

Master loved your All content ♥️

[@javascriptmastery]

Thank you! 😊

[@irocx8745]

One of the best comprehensive tutorial ...💯💯🔥🔥

[@javascriptmastery]

Thank you! 💯

[@vikaskumargond1902]

Just finished your blog Web app ... and now this 🔥🔥🔥 you made my day

[@javascriptmastery]

I'm glad to hear that! 😊

[@samvictor2754]

About to watch ... Buh dude... Your a King... My Pharaoh... Pls keep it coming.. This app is a most for my resume... Pls ... We need a second video💖💖💖💖💖

[@2difficult2do]

Adrian, your tutorial videos are amazing. Thank you!!!

[@demptd13]

It's very good job! But why: 1) do you use in menu and lists of images, but don't use ul/li? 2) And why you print all classes and dont' copy... 3) according to the methodology, don't all tags need to be given classes? 4) display:flex default flex-direction: row, why point it out? 5) why you use more than 1 time?

[@angelina1736]

I am so happy that I found your channel! Thank you for sharing this with us!

[@ForBusiness-me2gh]

Adrian, you are really angel. I have never seen like friendly tutorial and resource for learning react. Recommended. Thanks

[@sadiqshah6076]

I'm trying to stop the video, but your way of teaching, way of delivering content superb and it catches me via rope within 3 hours 😁 Love you dear

[@javasmastery__my_Teleqram_id]

Teleqram me 👆⬆️

[@janetgarciafineart6324]

You are a great teacher. I love also that you don’t rush when talking giving the mind time to synch what’s being said with what’s being shown. Really great tutorial!!!. Would love to see more.

[@nooribrahim4012]

Best of the best tutorial ever seen on react.. YOu made it very simple to develop thanks

[@kevinocampo506]

You are awesom JSM!!! Thanks for all your amazing content

[@pentesterz]

I am in love with you Sir and your channel. Haven't slept since 2 days and am just binge watching your all the videos like Netflix😇 I don't have words to thank you for the video. Lots of love and support by my side Sir😃😃