Build a React Portfolio Website With Tailwind Tutorial
HTML-код
- Опубликовано: 27 сен 2022
- 🚀 Upgrade your web development skills with my courses: developedbyed.com/
💻 Download the project files here
github.com/developedbyed/reac...
👉 Keelan's RUclips Channel
/ keelanjonathan
In today's episode, we'll be building out a sleek portfolio using React and Tailwind. This project is a great way to learn all about Tailwind's utility classes, taking a mobile first approach, dark/light mode, and more. If you are new to React, this is a really fun project to kickstart your journey into one of JavaScript's most popular frameworks.
💡 If you want to learn more about React, check out my channel for more React tutorials and you can find React courses on my website. developedbyed.com
🛴 Follow me on:
Twitter: / developedbyed
Github: github.com/developedbyed/
Instagram: / developedbyed
#react #programming #tailwindcss 
Наука
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
Please make more of these. I'm sure many people will find it extremely useful. Also really love the blender character addition
Make more of these, These are SUPER HELPFUL! 💯
Thank you my favourite teacher on the internet. Started watching your videos 1 and half year ago when I was first introduced to web development. Learned HTML and CSS by coding along with you. You were the reason I believed that I can become a web developer, so I joined a coding bootcamp in January. Recently I landed my first job as a web developer. I start in a few days and finally made my dream a reality. Thank you for your videos, you are a great motivator and teacher. I wish you all the best, you deserve it. And guys if you really like coding, don't give up. You will eventually land that first job.
Congratulation dude 🎉
inspiring bro. Congrats
how can I land a job bro?
@@h2beatzstudio you have to learn HTML, CSS, JS, React and then just keep applying everywhere, eventually there will be a company who will give you a chance. I applied to more than 500 places thriugh different platforms until I got my first job, so don't give up and keep learning daily.
@@AlexanderTVEducation do you work full remotely or hybrid? And how much time you spent on applying and studying?
I thoroughly enjoyed this tutorial! I look forward to customizing this project to make it my own. Thanks for making learning a blast!!!
every developer that I saw in my life was with stressing vibes .. you feel yourself don't be able to chill and smile after ending a tutorial after them but not you and this is a great greaaat point beside your great work, I hope you are good and happy all the time in your life, thanks for good vibes
wow great tutorial ... for the first time seeing tailwind in action, i just fell in love with it
Thank you so much, this video helped me into so many things, and also the plus of the dark mode is such a great feature. Good job!
I love this kind of videos, where you make jokes and there is in general a good mood in the air. I definitely learned something.
This came out so well! Thank you so much for the awesome video. It was easy to follow along and was straight to the point! Highly recommend this to my front-end developers.
Never used tailwind or next js before! yet your teaching make it seem like i fully understand it! THANK YOU. I Completed it at a Go. i also subscribed too.
I just gotta say i immidiatly fell in love with ur energy. i wish i was as hyped as you about the things i love
Starting in Next.js 13, the next/image component has undergone some major changes.
Compared to the legacy component, the new next/image component has the following changes:
Removes wrapper around in favor of native computed aspect ratio
Adds support for canonical style prop
Removes layout prop in favor of style or className
Removes objectFit prop in favor of style or className
Removes objectPosition prop in favor of style or className
Thank you so much. I followed you for one year and few months. Now I'm final year student on my IT facutly and also landed a first web developer job as an intern for the next 3 months. On the interview process they were very satisfied with me, and told me to keep up with that for the next 3 months so I can become Junior web developer :D.
Congrats bro! Keep it up.😉
Thank you for sharing this incredible project with us! You've set a new bar for excellence, and I can't wait to see what you create next. Keep up the fantastic work! 👍🎉
one of the best tutorials available , thank you very much :)
Thank you for making this so easy to follow along too.
Really nice tutorial for tailwind css, will be using much more :D thank you!
I recently started using Tailwind and I am loving these kind of tutorials.
do you still love it? Cause I just posted a video / tutorial on React + Tailwind CSS in 2023 - maybe this is also interesting for you ... 😉
That's a great tutorial Ed, thanks!!
Thank you! This video helped me a lot to understand tailwind!
I've been waiting for this content for years
u made those complex things so easy to understand thanks a lot sir
hope to see more react tailwind tutorials like this
I just posted a video / tutorial on React + Tailwind CSS in 2023 - maybe this is also interesting for you ... 😉
Thank you as always. It was interesting to learn tailwind and React. (THis was literally single page application... you used only one single JSX file to create it. Bravo! Now I am watching your next video. Thank you very much again
Thank you so much!!!! 🥰🥰🥰
more react and tailwind plssss🤗
Very useful video. Not overwhelming with to many things. Simple step by step instructions. I feel more confident to work on my websites using tailwind and react
It’s truly helpful for me! Thank you my gorgeous friend on the internet!
you're a freaking brilliant teacher!
Thank you ed, for this awesome tutorial
Just when I was about creating my portfolio. Thank youuuu
I have coded along with you. Successfully completed. Thanks for sharing your knowledge.
Great tutorial! Cheers from Brazil!
it is exactly what i was looking for. Thanks!!
Been using tailwind for 2 weeks now. First time watching a dev video that i can understand without pausing and just watching it for fun 😂😂. Thanks as always ed! Keep it up!
Same. I watch Ed sometimes not to code with him but just to be amused and laugh at his jokes about things I can finally relate! haha
hey new to webdev is next same as react and if I use mern stack as my technology, can I next js?
Great video Ed, and glad you liked the render 🔥🔥 Although it probably looks more like you than me 🤣
That was incredibly straight forward and helpful. Thank you so much :) 10/10
I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... would love to hear, what you think about my video on this topic? 🤔
We want more Like this. This is very useful
Yeay. Tailwind and next js is 🔥❤️❤️
Thank you Ed you are always so kind.
Dev Ed is the best tutor on the internet. Everyone needs to know that!
Fell in love with Tailwind
I would just like to say, I've watched 15 seconds, and you're extremely likable. Now onto the rest of the vid!
It's amazing, thank you so much.
Thank you very much for the great content Ed... :D 😁
Thanks this is very useful as a cloud engineer a portfolio is becoming a norm at this point
I like the way you code and that you get lost sometimes too :D Thank you!
tried it out and customized it. amazing👌
Great as always
i love your character man, very humble
Thank you! This is a great video!
Great tutorial! Thank you!
Thank you Ed! Much love
THANKS FOR THE TUTORIAL MEEEN!! GOD BLESS YOU
i've never worked with frameworks in web development before, so this'll be interesting to use.
thank u for the content. nice and helpful. keep it up 👍
coolest video! I followed it to a tee...was hard for first time website creator setting up VSCode, but after a few google searches and following your guide, i got a little pretty website now haha....thank you
Congratulations 😉
Great video as always, Ed. I have been a long time subsriber of yours and your videos have helped me out a lot.
Would it be possible for you to do a video on how to make an image gallery using React, TailwindCSS and Infinite Scroll but not use an API? I have a project with about 700 pictures I need to make and I don't want to host them with an API as that will cost a lot of money. I am struggling on how to add infinite scroll and use the image array I have set up. Maybe show both if you do this? I would greatly appreciate it as they are our wedding photos and I think would make a great project to demo as there aren't any examples on RUclips that I have found showing this setup. Please and thank you!! If not, it was worth a shot!
Thank you for this video!
What? Ed's back? O boyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy! Awesome! 😊
So amazing bro!
Awesome portfolio website) highly recommend
Very good video. Like it very well. Tailwind is powerful
thank you! I've been wanting to use React +tailwind for a client landing page but have been afraid of starting
Previous name of the channel was so nice than now🌝
What was ??
@@mrsameergaming6031 Dev Ed
Yeah Dev Ed was better
So i'm not the only one who thinks so
Yes, this one is tough to read.
Good content as usual
Halfway through the video. love it, and appreciate the hard work. One tiny problem for me, the word wrap is off which makes some of the text go off the page, which isn't a big deal still it's just an (Alt + Z) just click it please
Great video, I just wonder why use React here in the first place? The only feature which really was used here is the dark mode toggle, which is in vanilla JS pretty simple as well. React seems to be quite the overkill for a very static site like this.
you can use tailwind intellisense... been a savior for me with not having to memorize classes
Framer is built on react. Would be cool if you could show a tutorial on how to run a react site (like this one) through Framer.
A really underrated channel
You had me at BG!!
Thanks so much, Ed
Thanks men you're amazing
Thanks for create react project,
to be awesome
38:12 if you are wondering why the beautiful, code, consulting picture are sticking to the left even tho you have centered it. You need to put a div around the image, put a style, and display flex and justifyContent: center;
didn't fix it for me
or you can use mx-auto inside the img tag
THANK YOU! CAN YOU TELL ME WHY IT IS LIKE THIS?
Or you can just add "import Image from "next/legacy/image";" This is the newer version. So you need to add legacy instead of only nex/ image. Then you can use the next image properties.
@@_justkarl this worked for me!
Fue de gran ayuda! muchas gracias!
Thanks Video Ed !! And more tuto on next please ! Much love !
Thank you. I have a question. I can't find the class "text-md". Is it a class to set text font size and line height? I use text-base instead of it.
Thank you so much
Well done my dear.
Thank you bro !!!
Hy, just want to tell this is awesome source for everybody who's looking for build a portfolio from scratch. One thing I didn't understand why he installed next js instead of react.
I think because nextjs is a bit faster then create-react-app.
create react app at this point is deprecated and you should stop using it in favour of e.g. Vite or NextJS
Hello , i keep getting this error when using the react icons:
Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Home`.
The tutorial is really helpful. Could you also please let us know from where did you managed to export such images please?
Awesome content, thank you. Question: Why do you use padding to space out the elements instead of the margin? Is not adding a margin a better solution?
padding also increases the space INSIDE, whereas margin does OUTSIDE.
You are amazing! 😎
I love you, devEd😀
When i saw React and tailwind the like button was clicked immediately. ❤
I just posted a video / tutorial on React + Tailwind CSS in 2023 - maybe this is interesting for you as well ... 😉
I recommend Ed to capitalise each letter of chanel name. Sometimes I read it like "developed byed".
Hey are you going to make a node js course? that will be much appreciated thanks great video btw
awesome vid! what theme/style is that in VS code? looks great :D
wow very nice project
hi ed! i have question ..
How did you quickly learn to work with multi different frameworks ? just practice and search ??!!
I would have liked to see you use react components and props but great video overall
mega tutek more such subscription added :) Tailwind an React there is power.
Yes! Tailwind + React is awesome! 😉
Good job ⚘️
noice & we need some projectes with redux toolkit
very useful indeed
Awesome!
its crazy that 5 months later im trying to follow this tutorial and even just getting to 6:20 the index.js looks completely different and doesnt even have a footer element
true... 😄
The one and only ❤️