No video :(

React Project Tutorial: Build a Responsive Portfolio Website w/ Advanced Animations

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

Просмотров 1,6 млн

50% 1

► Get Full-Stack App Development Roadmap: webdecoded.gum...
In this tutorial, we build a personal portfolio website using React and Animate CSS. Follow along and share what you build in the comments!
👾Join my Discord:
/ discord
✉️Sign up for my newsletter:
eepurl.com/h4X959
🌐Get the HTML, CSS, JS version of this portfolio:
www.buymeacoff...
🌐GitHub URL:
github.com/jud...
📝Dev Resources List:
webdecoded.not...
☕Support the channel:
buymeacoff.ee/webdecoded5
0:00 Introduction
1:49 Installation
2:55 Navigation
24:12 Main Banner
39:06 Skills Section & Slider
49:56 Projects' Section & Tabs
1:03:40 Contact Form
1:21:26 Newsletter Subscribe
1:35:35 Footer
1:50:17 Animations
1:58:00 Wrap Up
Some f the links included in the video description are affiliate links. I am affiliated, but not sponsored. This means I might make money when you purchase paid services through the links provided and I might be able to offer discounts when available.

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

14 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@webdecoded 4 месяца назад

Check out my favorite VSCode extensions in this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2ss1FcM0st8.htmlsi=KNDdAXwqOkYJo52m

@weirdomemes 3 месяца назад

Can I know where you got that meter icon from

@aub1729 Год назад

if you're wondering these are all the commands used in the video - npx create-react-app name - npm start - npm install react-bootstrap bootstrap - npm install animate.css --save - npm i react-on-screen - npm i react-multi-carousel - npm install express cors nodemailer - node server.js - npm i react-bootstrap-icons --save - npm install react-router-hash-link

@webdecoded Год назад

Thanks for the list!

@brendantreynor8744 Год назад

I just wanted to say how great this was. This is probably the only responsive website I have gotten to work by just watching the tutorial and not going down the rabbit hole that is stackoverflow. Thank you so much!

@webdecoded Год назад

Thanks for mentioning it! I feel you, I have spent way too much time looking things up on stackoverflow based on when I needed them but realizing later that it is better to learn concepts first.

@zlatkoiliev8927 2 года назад

WOW! Really nice design, first time I see a tutorial in react with great design!

@webdecoded 2 года назад

Glad you like it!

@mehmetcaloglu9409 2 года назад

@webdecoded will you share a video that include the moment of you are writing this website's css?

@AnthonyHeimlich Год назад

❤

@aramharutyunyan6589 2 года назад

Thanks for your time doing this video. Anyway the most important part here is css, but you mainly copy paste it and dont go through it in details. I think it would be better if you could explain more about what you do to get this design.

@emar7543 Год назад

Your design is great! One simple advice/question: Why dont you just put the server running live on the side of your coding tab just so we can parallelly see the webapp developing visually while you code..? Encoding is very important especially for new devs who get lost easily. You did a good job anyways:)

@charusharma7872 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@techguy766 Год назад

yes her development is great but i did not understand what is going on which one is changing

@pohlgiron1940 Год назад

EXACTLY!!!

@jeyanthan360 Год назад

exactly

@tomasarvedson1285 Год назад

Agree.

@shyamdas8964 2 года назад

This is a best React Project on RU-vid which has a great responsive design. Really Loved it .❤❤

@webdecoded Год назад

Very grateful to be hearing this! Thank you!!

@harsh13200 2 года назад

Dear Judy, Hi I am HRJ, I'm from India. I want to thank you for the fantastic amazing and fascinating portfolio website tutorial on react. I loved your content It's amazing. Thank you so much you have inspired me a lot. You are Great!!! Thank you, Harshraj Sadwelkar

@webdecoded 2 года назад

Thank you so much!!! I'm glad you enjoyed it😊

@MrDAC92 Год назад

Thanks for the tutorial, really wasn't hard following your instructions and I can't express this enough, but the explaining while coding does so much to learn. Highly recommend this tutorial for new dev's trying out react and want to build a website.

@tanyaverma9450 Год назад

hey how did you do the newsletter part and sign up on the mailchimp..Can u help me with it

@tanyaverma9450 Год назад

hey can you help me with it

@yulianaquintana9361 2 года назад

very good, but you should show how it looks while you encode

@tanujkandpal4421 2 года назад

Same concerns 🥲🥲

@animeboys6044 2 года назад

Exactly

@abdousbaai5429 Год назад

Affirmative

@On_your_feet Год назад

Exactly

@yipyiphooray339 Год назад

Affirmative

@donauzakbaeva77 Год назад

you are an amazing frontend devoloper , you are always sharing with incredible fascinating skills , thaaaannnkk uuuu

@derekprieur5258 Год назад

Thanks for the tutorial, really digging the space theme! I would be curious if you ever thought about making a video on your design philosophy and/or tips for designing a webpage. I think this is the part of web development I struggle with the most

@charusharma7872 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@webdecoded Год назад

I don't have a video about design philosophy at the moment but I took your advice and tried to integrate some of the design tips in my new video, thanks for the suggestion! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oMPCV2yKgiw.html

@derekprieur5258 Год назад

@@webdecoded Very cool! Will be sure to check it out sometime this week 👍

@MrWhiteav6 2 года назад

This is beautiful. It really helped me to understand React too! Thank you!

@thequietkid5212 9 месяцев назад

Awesome portfolio website. I was just having trouble following you throughout the tutorial since I'm a beginner but i got it running in the end thanks for this this will help me a lot in the future

@RohitKumar-ns8bm 5 месяцев назад

What all help you took from Internet. Ad I am begginer as well and don't know anything about react as of now

@Persona-Nongrata 2 года назад

The best portfolio I’ve come across so far, thank you so much

@webdecoded 2 года назад

Thanks 🙏🏻

@_ash64 2 года назад

The UI is v. cool.. Although I have made a portfolio website for myself already. Imma add this to my to-do list! Subbed✨🍃

@prathamshrivastav7701 2 года назад

Can you share the link of your portfolio

@yogesh9974 Год назад

The only react tutorial found whose code is working properly. Subscribed right away waiting for more react projects tutorials

@RahulKumar-xl3dd Год назад

Did the code work for you ? My UI seems to be different following here code. Could you please share your code link or something?

@faith_overflesh Год назад

I now understand React much better. The design is very nice too! Tysm!

@arish5300 2 года назад

one of the best tutorials ever seen. keep rocking.love your voice😍

@mistersir3185 Год назад

that voice sounds so familiar, I am convinced you are Code Beauty!

@Guedesvibes Год назад

The project itself is very good, but several shortcuts and copies the Dev makes don't show the details. Like when to copy the Bootstrap part. For being a tutorial for beginners it should be more detailed and show the same is clicking (2:37).

@zhanglijunshao3310 Год назад

exactly

@nbav818 11 месяцев назад

I just finished the NavBar part of the video but I am running into an error even though its exactly how it is done in the video. This is my error SyntaxError: C:\Users\Erik\Documents\GitHub\web-portfolio\web-portfolio\src\components\NavBar.js: Identifier 'NavBar' has already been declared. (8:13). However it is exactly written like the video. export const NavBar = () => { | ^ 9 | const [activeLink, setActiveLink] = useState('home'); 10 | const [scrolled, setScrolled] = useState(false);

@mrquestionableshorts 11 месяцев назад

Check if you've written NavBar more than once in your file. Look at the top of your file. Make sure you haven't imported another NavBar. If you're exporting NavBar in two different ways, pick just one way.

@avakinmio9080 11 месяцев назад

Yeah I had this same issue, change NavBar to something else like Navigate the restart your server

@lubnaarora4946 Год назад

This was such a great tutorial . Very easy to follow and well explained. Looking forward for more such videos.

@Zardiep Год назад

can you help me please? I tried programming the same as this video but I couldn’t because my CSS code files are different from hers

@liontara 2 года назад

Nice design and thank you for this tutorial, but I have some suggestions for things that you should improve: Do not crop your videos like that. Try to be more smooth. There are moments when you add new things and you have croped the proccess of doing it. That leads the viewer to go to your git and copy - paste to their project. This is not good because they're supposed to learn and not to copy and paste. Also you should increase your voice because low slow voice makes you sound insecure.

@codeek0 Год назад

Thankyou so much for this wonderful journey! I am waiting for your next bootstrap react based projects!

@Yash.99 Год назад

How to add bootstrap in react in vs code

@Yash.99 Год назад

Please tell me i want to do this portfolio for my portfolio

@jessicadeshpande7988 10 месяцев назад

Thanks so much for this amazing tutorial. Its amazing . Looking forward to more content from you. Best of luck.

@jackmiddleton2080 Год назад

Very nice animations. Just the right amount to not overdo it.

@miggy0078 Год назад

As i see i guess that i will start crying. I always thought that frameworks are not for the true programmers. But now i can see that with framework is programming 100% faster. Thank you :D

@webdecoded Год назад

Glad I changed your mind😀 but knowing basics is important of course and if there's a limitation that framework poses to be able to work without it, but on regular basis it is more efficient to use framework. True programmers do care about efficiency I think.

@kingslayer5575 Год назад

is your contact section working?

@AlexIlyaGuennad Год назад

Insane quality lesson! You are amazing :) Thank you so much!

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

thank you but its really anoying that we don't ever see the app while coding in your video

@ibrahimkhurshid4339 2 года назад

This tutorial flows on butter wheels. I had no headache following thru it.

@webdecoded 2 года назад

Glad you enjoyed it😀

@christietang9125 4 месяца назад

Hi! I can't find the website where you got the navbar component code. Pleaseeee let me know :))

@surendradawar5768 Год назад

Wow! It's animation is super cool ❤

@user-te2pe5qm8o Год назад

I like it, honestly. After browsing through a lot of other people's, I like it. Rule one: No portraits.

@webdecoded Год назад

yess! those kind of photographs and you know one of those when companies used to show people in the office on their website, those aren't in style anymore.

@le.koiiithefish Год назад

How did you find all these high digital images for the project? Looks so cool

@neotr9005 Год назад

if you got the answer please tell me

@ceciliatalone2056 Год назад

Good tutorial, it would be great to explain a little bit more what you are doing since it's a bit hard for beginners to understand it. I'm also struggling with the mobile version. The text animation from the banner keeps playing when I'm reading the description and keeps moving the text up and down. I can't solve this issue, anybody knows how to do it? With trackVisibility it's not doing anything, I tried to put a useEffect with the onScroll function as we did in the navBar but it's not working either

@xKond3i 2 года назад

Looks amazing! 😍 Gonna watch it later!

@isaacopeyemirobert7868 2 года назад

same here

@tripathi_1002 Год назад

Thanks a lot for this great tutorial. I just want to make a small request, please post a deployment video for specifically this project as the video you suggested for deployment purpose is different as most of us are having problem in deploying server.js which is not included in that suggested video.

@webdecoded Год назад

Thanks for the request! Just uploaded the deployment process video

@bukhorimuslim3240 Год назад

This is so amazing. It really helped me to understand React too! Thank you for tutorial

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

im so glad that i ve watch this up to date 2008 tutorial 👍

@eugenebelcher3 11 месяцев назад

Thanks for this. It works perfectly and I'm excited to learn more from you

@webdecoded 11 месяцев назад

Excited to have you here!

@Old-Dog40 2 месяца назад

Thanks for video, I was able to build my first react website

@firestormag 2 года назад

Thank you so much One of the best projects I've seen on the internet :)

@webdecoded Год назад

Thanks for appreciating my work!!

@ItzMav7 2 года назад

whenever we do the projects section, how would we include the url to project and GitHub file?

@andrewalters5731 2 года назад

Did you figure it out?

@ahmadalharbi9097 2 года назад

What a great design!! Realy love it

@Jaksteroide 11 месяцев назад

HiJudy, Great project! I just finished up and it was exciting to see how it looks finished! Thank you for your knowledge! Although I found some small issues in the Projects option on the NavBar and when you fixed the overlapping background of projects on the newsletter, the ::before effect of the projects was broken, now it has no hover effect. I sent you 2 Pull Requests that fix those issues, I hope they help =n.n= New Sub!!

@Farruh_13 11 месяцев назад

Hi, can u share also with us , there, in the comments, please?🙏

@srishtijha3 7 месяцев назад

Yes plz

@jplappa1 Год назад

This website looks really, really awesome

@vaibhavkhandelwal9030 Год назад

change 'id = projects' in project. js's section element to be able to navigate to projects from the navbar. I spent 2 hrs on this typo, I hope you don't xD

@jackchen6464 Год назад

The contact me section does not seem to be working, when I enter details in it does not send an email through. I was wondering if I could get some help on that?

@user-rg1jg7wn5n 6 месяцев назад

Error: link is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. Iam getting this type of error in app.js when i call Navbar

@jakubgadzala7474 11 месяцев назад

Awesome project. Subscribed!

@vishnuvr1067 Год назад

Great UI, thanks for this wonderful content.😍

@thequietkid5212 9 месяцев назад

for anyone having trouble in contact section just run the server file by clicking on run button in vs code and try to send email with someone's email

@GabrielMartinez-ez9ue 2 года назад

Wow.. this channel is incredible. Please keep going

@juliaisasti2583 6 месяцев назад

webcoded im in love w u thank u for the wonderful tutorial i learnt so much!!!!!!

@omargaye4630 Год назад

Merci beaucoup votre tutoriel est vraiment très intéressant.

@lauren2810 7 месяцев назад

I loved this tutorial, thank you! ✨✨

@abdellatif.x8127 2 года назад

You deserve thousands of subs for this art 👏

@webdecoded 2 года назад

Thank you😊

@programmeraman Год назад

What an awesome design loved it

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

great tutorial. it would be great if you'd split the screen between the code and the webpage so we can see the results as you modify the code.

@metquadi 2 года назад

i love your voice already

@androidgamingtv. Год назад

thank you straight to the point

@yaserpy Год назад

good design .. awsome. 100 thumbs up

@eugenegavrilyuk907 2 года назад

Thank you! Excellent work! Keep going!

@radenbagoesyudharanggasanj2542 Год назад

thanks, wish you all the best!

@webdecoded Год назад

Thank you!!

@クバ Год назад

Awesome tutorial and beautiful styles!

@webdecoded 11 месяцев назад

Thank you so much!

@awaluddintogar1175 2 года назад

ayo, thats what i've been lookin for thanks mate

@MuhammadhammadSohail Год назад

WonderFull video from amazing person!

@caicktanan6508 Год назад

Congratulations for your job, is nice!!! thank you so much.

@ShubhUSinha 7 месяцев назад

Great content 👍 SUBSCRIBED ❤

@Pj-fd8vs 8 месяцев назад

Love this design!! ❤

@webdecoded 7 месяцев назад

Thank you! 😊

@carlosstevanospinalopez9996 2 года назад

i really enjoy proming in react! actually so fun

@webdecoded Год назад

love react!

@cmo4ever 2 года назад

Spectacular video. Something unclear to me, how did you run the server.js or get to run at start? I went through the files and might have missed that config.

@davidcastagnetoa Год назад

use node server,js in your terminal

@Uri.Sab. Год назад

Your work is so good.

@djibrilm__- 2 года назад

Good design I'm falling in love of it 🙂🙂

@WildHowlYT Год назад

Awesome design 🔥🔥

@user-lu9jd7tz8f 7 месяцев назад

Thanks for your awesome tutorial.

@caroldsilva6262 Год назад

Thank you so much for this learnt so much.

@juancaceres5981 19 дней назад

Thank you so much ❤

@facucorona Год назад

Thank you very much! Very useful tutorial!

@charusharma7872 Год назад

animated Box With CSS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gBmx3RmThDE.html

@thaisonngo4292 2 года назад

Thank you so much, very awesome tutorial

@raikkuli3513 Год назад

Otherwise very nice, but I'd like to see the results while you write. Maybe every now and then show the product and what changed when you wrote something.

@webdecoded Год назад

great suggestion! will keep in mind

@jt.constantine 2 года назад

SUBSCRIBED :) love this wonderful project

@avhiragaming Год назад

love your project so much 👍👍👍

@eguchiyuuki Год назад

Thanks for the tutorial, great.

@unlimited_code 2 года назад

I love your Work!

@DinethR-oe9ss Год назад

Thank you so much for this :)

@kiokocodes 9 месяцев назад

Great this helped me a lot.

@qithree Год назад

Thanks for ur tutorial. It's awesome. Could you let me know how to make mail contact form work pls? After npm start, I tried npm run server.js on the other port, but fail. and if I want to deploy on firebase, should I build on hosting only?

@cvetapandurska6098 Год назад

literally having the same problem ):

@dardkasafeer9287 2 года назад

amazing!!! you deserved a sub and i did.

@CoolGuy-om4il 2 года назад

Video just jumps at 18:36?

@ariekrazanrasyad8563 7 месяцев назад

How to run it in Termunal VS Code?

@vihangafernando6644 2 года назад

Hi thank you for this tutorial .It was amazing

@christianthrige Год назад

Does it have to be on a domain for the contact form to work? Ive been trying to figure out how it works, but i just keeps me on "sending".. I have installed the packages express cors nodemail, and enterede my own gmail on in the fields on the server.js. Anything i could be missing?

@AlifAhmadAnkon Год назад

Following. Facing the same issue

@ahmedmhmad716 10 месяцев назад

Great explain but why you don't open the page,a lot of people don't know what are you doing to the elements , I reached 20 minutes and you didn't open the page once I can't imagine all the changes from my mind because I am beginner in react

@erwinprasetyo97 2 года назад

that is beautiful tutorial , thanks

@jamjam3337 Год назад

Thanks for the tutorial👏👏👏

@webdecoded Год назад

Thank you for watching!!

@zacate1983 2 года назад

Hi! Thanks for this tutorial, it's very helpful and it looks incredible!

@webdecoded Год назад

Hi! I'm glad it was helpful, thank you!

@mathieutercan8619 3 месяца назад

Reallly good tutorail but i think it will be better if you show the result after adding some line, this is alow you to explain more in detail what you are doing (sry for my english lol )