React Portfolio Website Tutorial From Scratch | Responsive Portfolio Website Using React JS
HTML-код
- Опубликовано: 13 июн 2024
- Learn React JS Completely from scratch in this 2:30hrs Crash Course. This course is designed specially for new web developers, who just started to learn react js. In this course we will build a complete portfolio website using react js.
In this course, we are going to learn -
1. React ES6 Basic Syntax.
2. React Render HTML.
3. React JSX essential Syntax.
4. How to use React Components, Class, Props, Events.
5. React Conditionals.
6. React Router.
7. React Hooks such as - useState, useEffect, useCallback, Custom Hooks.
8. Most importantly we will learn the Best File & Folder Structure you should follow..... and much more.
By building our react js portfolio we will try to cover all these topics.
📚 Materials/References:
Starter Template: github.com/tech2etc/React-JS-...
Full Source Code1: www.buymeacoffee.com/tech2etc...
Full Source Code2: ko-fi.com/s/59f9d8a90e
React Official Website: reactjs.org/
React Icons: react-icons.github.io/react-i...
All Source Codes: www.buymeacoffee.com/tech2etc
GitHub: github.com/tech2etc
⛔❌Do Not CLICK This Link: bit.ly/3lJLyLY
Need any help? Join my Discord: / discord
SUPPORT ME:
👕 Merchandise: tech2etc.com/merchandise
🎁 Buy Me A Coffee www.buymeacoffee.com/tech2etc
🎀 Donate Me By Paypal: www.paypal.com/paypalme/tech2etc
How To Make MONEY Online - My 4 Favorite Tricks:
👨💻 Start Freelancing: tech2etc.com/fiverrcpa
🛒 Learn Digital Marketing: tech2etc.com/digital-marketing
📹 Make Video Editing As Profession: tech2etc.com/video-editing
🕔 Next trick will be revealed at the right time.
Free Course to Improve SKILLS & EARN:
1️⃣ WordPress Insider: tech2etc.com/wordpress-course
2️⃣ Bootstrap With Projects: tech2etc.com/bootstrap
3️⃣ Web Development For Beginners: tech2etc.com/webdev
4️⃣ JavaScript With Projects: tech2etc.com/javascript
5️⃣ Python With Projects: tech2etc.com/python
🎁 Get Certificate: courses.tech2etc.com/
Important Links:
📂 Best Hosting: tech2etc.com/best-hosting
📂 Best CV Resume: tech2etc.com/my-resume
📂 Freelancing Guide: tech2etc.com/learn-freelancing
📂 Interview Questions: tech2etc.com/?s=interview
DISCLAIMER: This description contains affiliate links. Which means I may receive a small commission on affiliate links used. This helps support the channel and allows us to continue to make videos like this. All content used within the parameters of fair use.
===============================
Connect with me & get daily updates👇
===============================
Discord: / discord
Instagram: / fahimulkabir.tech2etc
Twitter: / tech2etc
LinkedIn: / fahimulkabirchowdhury
Group: / 14295322
FB (Personal): / mdfahimulkabir
FB Page: / tech2etc
Timestamps:
0:00 Start
1:09 Portfolio Website Preview
3:17 Install React JS
4:46 Folders & Files Overview
6:27 Lets Organize The Folders & Files
8:20 Install React Packages
12:05 Creating Route Pages
20:19 Responsive React Navbar
48:20 Home Hero
1:01:27 Change Nav Background on Scroll
1:06:27 Footer
1:19:41 Render Components in different Pages
1:22:11 Learn Dynamic Components
1:36:31 Pricing Card
1:47:28 Dynamic Card Component
2:14:07 About Component
2:24:30 Contact Form Component
#reactjs #reactcrashcourse #reactportfolio
Hey Everyone! Hope you are enjoying this course. ✅
If you do then please subscribe this channel and help me to react 100k Subscribers GOAL.🔥
Timestamps:
0:00 Start
1:09 Portfolio Website Preview
3:17 Install React JS
4:46 Folders & Files Overview
6:27 Lets Organize The Folders & Files
8:20 Install React Packages
12:05 Creating Route Pages
20:19 Responsive React Navbar
48:20 Home Hero
1:01:27 Change Nav Background on Scroll
1:06:27 Footer
1:19:41 Render Components in different Pages
1:22:11 Learn Dynamic Components
1:36:31 Pricing Card
1:47:28 Dynamic Card Component
2:14:07 About Component
2:24:30 Contact Form Component
Can you do a method 3 how to track a phone number tutorial for educational purposes?
do you use redux or usecontext api ?
I m having error in module not found in ERROR in ./src/index.js 5:0-34
cAN YOU SEND THE img you use this website
Thanks for this ,how to free hosting this website portfolio ?
Hi, I replicated this portfolio site from scratch by coding along. It was quite easy to understand. Now I have my first portfolio website using react. Keep posting more projects using react. Thanks a lot.
How did got these images?
Also, without changing the structure of the HeroImg2 arrow function - at 1.33.49- -, you can directly add the component properties like this: const HeroImg2 = ({ text, heading }) => {
return (
{heading}
{text}
);
}; - Thanks for your work !!! it's awesome!
Thank you for this amazing tutorial! Really helpful and beginner friendly!
You made me understand components only with a fee sentences. Great work. Thank you
The final product looks brilliant, good job :)
This is the best beginner friendly react course. Thank you
You're very welcome!
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.
This is the best beginner friendly react course. Thank you ❤.
Most welcome
Thank you for helping me a lot to understand everything in an easier way🤟
Thank you so much for this course...learned a lot
I’ve completed whole this project.
And by the way, learned so many
Thank you so much , it was really helpful.
Excellent, very clear tutorial! Thank you!
Thank you.
big thanks to you, i'm really understand about this part
Amazing work. Thanks for the video.
one of the best explanations for react project 👌👌
Awesome!! Thank you very much.
This is a great video... If there is a way to like this video multiple times, trust me I would. God bless you man....
This was great. Very clear and easy to follow. Thanks!
How did u get those images?
Thank you very much very descriptive and brilliant content ✌
I salute of your Hardwork !! Thank You...
Your explanations is too good... I like your way to explain small things properly....
thats very awesome you learn from scratch and way of you also best.
ThankYou very Much , one of the best video ...for begginer to learn from scratch. Iam glad i got to learn bit by bit from this video .Otherwise remaing channel are just copy pasting bootstarp and github. thanks a lot
I have done it all, great tutorial, Thanks
It is such a resource full of react details.Keep it up.
Super easy to follow.
This is cool! Good job👍
Thank you for the video, greetings from Argentina
OMG what a underrated channel
Please sir
Bring more javascript and React
Project from scratch
Coming soon.
Too much info vedio guided us on step by step... Keep it Bro
Thanks for this video, i am starting to learn ReactJS and this is the video that helped me, thank you.
Glad it helped
Thanks a lot very well done.
thanks sir for providing such educational vedio a lot of my foreginer friends also watch your vedios they say u teach very slowly and in a frinedly manner thanks a lot. u making us indians proud and JAI HIND
So nice of you. Though Im form Bangladesh.
Thank You!
Thanks for the tutorial❤❤
how to set path of one component in other component local varible just like u set path in view of your youtube link vut i want to et my other component as link so how to do it
Thank you very much for this video
wow wow wow!!!. Amazing 👏 you are an angel sent directly from heaven.
I really enjoy this tutorial. It was very helpful. I was wondering, how can you include a link to download a resume? Looking forward for more tutorial! Thank you
Great project. Very beginner friendly 👍
Thank you.
Thank you for helping me a lot to understand everything in an easier way, greetings from argentina I hope the good things come back to you :)
You are welcome!
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.
Thank you 😊
enjoyed the lecture and good for learn reactjs
it's nice tutorial! Thank you so much! from Korea
awesome tutorial thank you
Thank u so much very useful
Thanks for your effort
yes yes
please more content like this
I like this tutorial, however I wanted to point out that in order to have props for the Hero Image component, it was not necessary to have a class component. You could have kept the component as functional and destructured the props you need, say heading and paragraph, see below:
const HeroProject = ({heading, paragraph}) => {
return (
{heading}
{paragraph}
)
}
I had a idea so iam testing it through the website the purpose of the site is about providing the information about offers across various platforms and also announcements of buss,tech,govt.
This is very helpfull .....
Thanks 😊
Keep it up
Most welcome
Great video ❤
Amazing job. learn a lot.. thank you.:)
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.
How would i go about storing the input from users filling out the contact form?
very good bor i'm From Uzbekistan
I am having terrible problems getting my server to run. What versions of node are you using and which work best for Windows 11?
great to see you coming with react project .. and the Js Ecommerce project was really good .. keep going bro
Thank you bro
JS Ecommerce project i cant able to find
@@minivillagecooking138 you can find it in Playlist tho
Thank you so much!!!
Most welcome
Your teaching was absolutely fantastic.. but i expect drop-down menu too.
Will try to cover that in our future videos.
Thanks buddy.. Learned a lot from this video ✨❤
Your most welcome. Please share this project on your social media. Will appreciate that.
@@Tech2etc sure.. Will going to post in linkedin soon.. Are you a front-end dev or full stack developer bro?
thank you!
Awesome👍👏😊
Good explanation ❤
Thanks
Hi Sir, can i ask where can I download the image assets? Thank you
This is an amezing project for beginners , strongly recommend to everyone , and lot of thanks and love bro I have made my protfolio website help of this.
hii asutosh , i stucked domewhere ...can u pls. help me?
@@nishant5205 yes sure how to connect??
Thanks.. very helpful
You're very welcome!
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.
I really enjoyed your tutorial it is very informative...thank you
Your most welcome. Please share this project on your social media. Will appreciate that.
@@Tech2etc definitely
Wonderful course. Please make more videos on react.js.
Coming soon
best teaching
Anyone using styled components for the css? I’m having trouble adding the active state 😔
at 1:33:35 u can add this it will work
const Heroimg2 =(props)=>{
return(
{props.heading}
{props.text}
)
}
export default Heroimg2;
Hello! I'm running into one particular issue.
When I expand the menu on mobile resolutions, it's covered by the background and I can't see it unless I make background transparent. Then the menu isn't clickable and it just shows the whole menu taking up the screen.
I know the issue is with the z-index and positioning, can you help me understand what's going on here?
Fixed the issue a while ago....just FYI!
Thank You Boss
Very nyc 👌
thnq so much
Thank you
my footer doesn't appear in the home page . what the problem?
Excellent Video! I am only left with the question of how to send email to personal email address on the form submit. Once a user clicks the submit button on the contact page how can you grab the inputted values-> render it to an email-> send email?
Will try to cover it in our future videos.
what theme vs code are you using?
After deleting app.css and logo .svg it is showing module not found error please fir
Keep continue reactjs course
Thanks. I will.
keep ur work high
Thank you so much
do you use redux or usecontext api ? I didn't watch complete video just open this
Hello i'm your subscriber, may what color theme do you use?, thank you
Thankew❤️❤️
Most welcome
Nice
Did anyone fixed the grid-gap issue with something alternative to it as the grid-gap property is no longer supported by vs code.
replace it with "'gap"
I will write another comment for the algorythm :) i was thinking insted of setting the value of the nav menu to left -100% so it always is rendering outsite the screen can we not use display: none on .hamburger class and then display: flex; on the nav-menu.active or is that bad practice?
No. Its not a bad practice. But if you use display none & flex, you won't see the sliding transition, which we can see when we use left & right value.
It totally depends on the usability, like how you want your website to be.
But i think you should give a try with display none & flex. It will help you to visualize the difference between them.
Please add section when we click on submit on contact page we get email or something
Please when i click on the view button after setting its link in the workcarddata, it directs me to a blank page on the local host. Please how do i fix it?
@ekenengwudike8989 Hy..Did Yu fix that? Pl rep
Thank you! 🙂
You’re most welcome 😊
hey have you purchased the app ? does it work exactly like website ? i mean on browser? or no
Thank u bro that's amazing
Question: Did I need to know nodejs before starting learning reactjs ?
No... no need.
very goooood
Thank you.
nice
hey guys i've been tried awhile understanding how they do the thumbnail of some coding videos but i didn't find out how they do so help me guys tell me how to create an image that's show the content on your website
I am facing an issue that when I import Navbar and Footer component in other pages than home they both stuck together at top
it is because you dont have any other component/object in between them.
@tech2etc sir, one question instead of making two new comment Workcard and WorkcardData and maping them ..
We can make it by copying "project -card" Div and changing the content inside it.. please explain.
Also Thank you so much for this content 🔥❣️
Yeah please respond !!!
could. you explain "setClick(!click)" does it mean click is true since it was false when you initialized it?
yes, initially the initial value of state is false means , after clicking it then will be updated to its opposite value bcz of "!"
Maybe this project will be milestone for me.
Thanks!
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.