React Project Tutorial: Build a Responsive Portfolio Website w/ Advanced Animations
HTML-код
- Опубликовано: 31 май 2024
- ► Get Full-Stack App Development Roadmap: webdecoded.gumroad.com/l/full...
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.buymeacoffee.com/webdecod...
🌐GitHub URL:
github.com/judygab/web-dev-pr...
📝Dev Resources List:
webdecoded.notion.site/Dev-Re...
☕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. 
Наука
Check out my favorite VSCode extensions in this video:
ruclips.net/video/2ss1FcM0st8/видео.htmlsi=KNDdAXwqOkYJo52m
Can I know where you got that meter icon from
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!
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.
WOW! Really nice design, first time I see a tutorial in react with great design!
Glad you like it!
@webdecoded will you share a video that include the moment of you are writing this website's css?
❤
This is beautiful. It really helped me to understand React too! Thank you!
This is a best React Project on RUclips which has a great responsive design. Really Loved it .❤❤
Very grateful to be hearing this! Thank you!!
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
Thanks for the list!
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.
hey how did you do the newsletter part and sign up on the mailchimp..Can u help me with it
hey can you help me with it
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
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
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! ruclips.net/video/oMPCV2yKgiw/видео.html
@@webdecoded Very cool! Will be sure to check it out sometime this week 👍
WOAHHH thank you all for the positive feedback on this video means a lot!
Have received some requests about issues with the email server and how to deploy it, so made another video:
ruclips.net/video/J59hkkiRClY/видео.html
To address those issues, hope it helps:) happy coding!☕
Perfect!
mam how to resolve contact form issue
I still face this, please help-> Error: self-signed certificate in certificate chain
at TLSSocket.onConnectSecure (node:_tls_wrap:1545:34)
at TLSSocket.emit (node:events:513:28)
at TLSSocket._finishInit (node:_tls_wrap:959:8)
at ssl.onhandshakedone (node:_tls_wrap:743:12) {
code: 'ESOCKET',
command: 'CONN'
}
Is this for Complete beginners?
Mam give mi solutions on my error please 😐 I have given on comments box
The best portfolio I’ve come across so far, thank you so much
Thanks 🙏🏻
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.
you are an amazing frontend devoloper , you are always sharing with incredible fascinating skills , thaaaannnkk uuuu
I now understand React much better. The design is very nice too! Tysm!
one of the best tutorials ever seen. keep rocking.love your voice😍
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
What all help you took from Internet. Ad I am begginer as well and don't know anything about react as of now
Insane quality lesson! You are amazing :) Thank you so much!
The only react tutorial found whose code is working properly. Subscribed right away waiting for more react projects tutorials
Did the code work for you ?
My UI seems to be different following here code. Could you please share your code link or something?
Thanks so much for this amazing tutorial. Its amazing . Looking forward to more content from you. Best of luck.
This was such a great tutorial . Very easy to follow and well explained. Looking forward for more such videos.
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
Very nice animations. Just the right amount to not overdo it.
The UI is v. cool.. Although I have made a portfolio website for myself already. Imma add this to my to-do list! Subbed✨🍃
Can you share the link of your portfolio
What a great design!! Realy love it
This is so amazing. It really helped me to understand React too! Thank you for tutorial
Thankyou so much for this wonderful journey! I am waiting for your next bootstrap react based projects!
How to add bootstrap in react in vs code
Please tell me i want to do this portfolio for my portfolio
What an awesome design loved it
Thank you! Excellent work! Keep going!
Wow! It's animation is super cool ❤
I loved this tutorial, thank you! ✨✨
Great UI, thanks for this wonderful content.😍
This website looks really, really awesome
Wow.. this channel is incredible. Please keep going
Thank you so much One of the best projects I've seen on the internet :)
Thanks for appreciating my work!!
Awesome project. Subscribed!
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
Thank you so much!!! I'm glad you enjoyed it😊
Keep the grind up my man
Thanks for video, I was able to build my first react website
im so glad that i ve watch this up to date 2008 tutorial 👍
Looks amazing! 😍
Gonna watch it later!
same here
Thank you so much, very awesome tutorial
webcoded im in love w u thank u for the wonderful tutorial i learnt so much!!!!!!
Thanks for this. It works perfectly and I'm excited to learn more from you
Excited to have you here!
ayo, thats what i've been lookin for
thanks mate
thank you straight to the point
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:)
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
yes her development is great but i did not understand what is going on which one is changing
EXACTLY!!!
exactly
Agree.
Awesome design 🔥🔥
Good design I'm falling in love of it 🙂🙂
Congratulations for your job, is nice!!! thank you so much.
thank you, really cool video, i used the website as a template and it turned out to be a really good product!!
Wohoo, amazing!
Your work is so good.
WonderFull video from amazing person!
Thanks for your awesome tutorial.
Thanks for the tutorial, great.
You deserve thousands of subs for this art 👏
Thank you😊
Thank you so much for this learnt so much.
Awesome tutorial and beautiful styles!
Thank you so much!
I love your Work!
Hi thank you for this tutorial .It was amazing
that is beautiful tutorial , thanks
love your project so much 👍👍👍
Merci beaucoup votre tutoriel est vraiment très intéressant.
SUBSCRIBED :) love this wonderful project
Thank you so much for this :)
Great this helped me a lot.
good design .. awsome.
100 thumbs up
Love this design!! ❤
Thank you! 😊
Hi! Thanks for this tutorial, it's very helpful and it looks incredible!
Hi! I'm glad it was helpful, thank you!
amazing!!! you deserved a sub and i did.
that voice sounds so familiar, I am convinced you are Code Beauty!
it's really looks so awesome🤩
Awesome content!
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.
Thanks for the request! Just uploaded the deployment process video
Great content 👍 SUBSCRIBED ❤
thank you very much this is was amazing
This tutorial flows on butter wheels. I had no headache following thru it.
Glad you enjoyed it😀
Thank you very much! Very useful tutorial!
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
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
thanks, wish you all the best!
Thank you!!
Thank you, you are amazing 👌👌😍😍
i see when i press on links (home, skills or projects) it automatically add active class to it. so why do we use onUpdateActiveLink function ?
Very amazing 🤩
Wow amazing
Perfect ❤️
thank you!
This channel is on the next level. Great content! 💟
So happy to hear this, thank you!!
very good, but you should show how it looks while you encode
Same concerns 🥲🥲
Exactly
Affirmative
Exactly
Affirmative
Thanks for the tutorial! Just a question, you didn't explain how to add the cursor that appears in the welcome text and is shown at the beginning of the video (second 0:01), as opposed to the end of the video which shows only the effect of the words without the cursor (minute 1:58:30). How to add it?
Thank you so much
i really enjoy proming in react! actually so fun
love react!
Awesome video
Thanks for the tutorial👏👏👏
Thank you for watching!!
Thank you it’s amazing tutorial
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
This is awesome!
Thank you!
wow good ui!
This good one
can somebody describe the mail method in detail ?? bcz i tried using npm server but get an error what should i do in this case ? is there any step i am missing right now ?
I can't get the arrows on the skills section to work, it just renders some squares where the arrows should be, also i can't see in your finished code where the imported arrow files are used in the Skills.js, so why are they imported if are not used? Thanks in advance
Thank you so much for the great videos, the design is so amazing !!!
Thanks a lot
i love your voice already
thanks!