Build a React Portfolio Website With Tailwind Tutorial

[@AlexanderTVEducation]

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.

[@andifaizal6848]

Congratulation dude 🎉

[@ashimshrestha4004]

inspiring bro. Congrats

[@h2beatzstudio]

how can I land a job bro?

[@AlexanderTVEducation]

@@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.

[@ahmadimamadyan1396]

@@AlexanderTVEducation do you work full remotely or hybrid? And how much time you spent on applying and studying?

[@donnarex4398]

Please make more of these. I'm sure many people will find it extremely useful. Also really love the blender character addition

[@deniskantic1115]

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.

[@lukas.webdev]

Congrats bro! Keep it up.😉

[@syedsaadali420]

[@oezer]

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

[@nada125love]

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

[@kj-hw4qw]

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;

[@stago3612]

didn't fix it for me

[@_justkarl]

or you can use mx-auto inside the img tag

[@Xaffre]

THANK YOU! CAN YOU TELL ME WHY IT IS LIKE THIS?

[@Sauceskiii]

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.

[@patrickrooney6460]

@@_justkarl this worked for me!

[@bravinrutto8784]

I recently started using Tailwind and I am loving these kind of tutorials.

[@lukas.webdev]

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 ... 😉

[@udayrajvadeghar8555]

one of the best tutorials available , thank you very much :)

[@Jonasmelonas]

I would just like to say, I've watched 15 seconds, and you're extremely likable. Now onto the rest of the vid!

[@balisha100]

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

[@samuelkamau1550]

wow great tutorial ... for the first time seeing tailwind in action, i just fell in love with it

[@paschalynukwuani6930]

Dev Ed is the best tutor on the internet. Everyone needs to know that!

[@HrissW]

Make more of these, These are SUPER HELPFUL! 💯

[@KeelanJon]

Great video Ed, and glad you liked the render 🔥🔥 Although it probably looks more like you than me 🤣

[@rio8924]

u made those complex things so easy to understand thanks a lot sir hope to see more react tailwind tutorials like this

[@lukas.webdev]

I just posted a video / tutorial on React + Tailwind CSS in 2023 - maybe this is also interesting for you ... 😉

[@josikie]

Fell in love with Tailwind

[@cggs3001]

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!

[@hiryuimajin]

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

[@astik2002]

hey new to webdev is next same as react and if I use mern stack as my technology, can I next js?

[@Scorpion2321-o9o]

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.

[@FaithOlusegun]

What? Ed's back? O boyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy! Awesome! 😊

[@niklasmartinsson3719]

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

[@lukas.webdev]

true... 😄

[@mostlydevs4277]

When i saw React and tailwind the like button was clicked immediately. ❤

[@lukas.webdev]

I just posted a video / tutorial on React + Tailwind CSS in 2023 - maybe this is interesting for you as well ... 😉

[@odkhuu5723]

i love your character man, very humble

[@kevinwg02]

you're a freaking brilliant teacher!

[@PaulRichardEdits]

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.

[@chacalfmp]

Great tutorial! Cheers from Brazil!

[@rengga7021]

It’s truly helpful for me! Thank you my gorgeous friend on the internet!

[@ZaiyordNurdin]

A really underrated channel

[@Jytaani]

hey, so i have a problem. I cant seem to have that pages section with app.js what is going on?

[@meghaiiitd4586]

same, unable to find

[@glebt2429]

Yes, the reason for that is the new NextJS update. In order to get the same project structure as in Eds video you have to select No when it asks you 'Would you like to use App Router? (recommended) No / Yes'. :)

[@Jytaani]

@@glebt2429 a year late but oh well, I got my portfolio project done within deadline, didn't end up using nextjs but the project was fine.

[@kaderlakhdar5735]

after installing everything as you did, my folder structure ist the same as yours , then i couldt follow along with you, thank you for your efforts

[@PiyushSharma12479]

Next js has changed a bit , now you get tailwind eslint pre configured you should check documentation it is not good to rely solely on video

[@ameenmohiyuddin8798]

Thank you for making this so easy to follow along too.

[@1Atheeleyah]

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

[@lukas.webdev]

Congratulations 😉

[@JavaScriptJolt]

I thoroughly enjoyed this tutorial! I look forward to customizing this project to make it my own. Thanks for making learning a blast!!!

[@gyovanisantos85]

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!

[@warrayn10]

I like the way you code and that you get lost sometimes too :D Thank you!

[@serkan_bayram]

43:58 how does he move on code screen like that? Does he pressing a key in that moment?

[@lukas.webdev]

Wow, I never saw that before 🤔

[@luci-goosey]

probably scrolling w his mouse, horizontal scroll is done by holding shift while scrolling

[@okyanawangramadhana4879]

I've been waiting for this content for years

[@liza-px1zn]

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.

[@modoulaminceesay9211]

Thanks this is very useful as a cloud engineer a portfolio is becoming a norm at this point

[@shree4641]

I have coded along with you. Successfully completed. Thanks for sharing your knowledge.

[@andifaizal6848]

Yeay. Tailwind and next js is 🔥❤️❤️

[@MiaHere-g9n]

Really nice tutorial for tailwind css, will be using much more :D thank you!

[@zoen5192]

Thank you! This video helped me a lot to understand tailwind!

[@BobbyBundlez]

you can use tailwind intellisense... been a savior for me with not having to memorize classes

[@akashjaiswar9437]

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

[@syed9846]

Thank you ed, for this awesome tutorial

[@abubalo]

I recommend Ed to capitalise each letter of chanel name. Sometimes I read it like "developed byed".

[@kyriakosbekas]

That's a great tutorial Ed, thanks!!

[@jasongrammer4156]

where did you get the avatar from?

[@mhlib7569]

thank you! I've been wanting to use React +tailwind for a client landing page but have been afraid of starting

[@SwatiSrivastav-cs6hl]

The tutorial is really helpful. Could you also please let us know from where did you managed to export such images please?

[@paoloalayacyac6346]

Thank you so much!!!! 🥰🥰🥰 more react and tailwind plssss🤗

[@foulweatherworks7831]

OK, I have done the beginning of this tutorial 8 times from a fresh install, on two different computers, and I can't get the next.js site that shows up initially at the localhost to have any styling at all, and my initial project file after creation does not contain a "pages" folder or a "public" folder or "styles" folder. when I download them from github the index.js file is way different than the file he's starting with, I am at a bit of a loss on where to go from here to follow along, can't wait to dive into all of this!

[@JavohirMiraxtamov]

Great as always

[@alexfriedman8670]

my fix for depreciation in lines 68-70 (deved image styling)

[@devMohaimin]

We want more Like this. This is very useful

[@sreekartammana]

Previous name of the channel was so nice than now🌝

[@mrsameergaming6031]

What was ??

[@adomicarts]

@@mrsameergaming6031 Dev Ed

[@Darkgx5]

Yeah Dev Ed was better

[@DanteMishima]

So i'm not the only one who thinks so

[@abubalo]

Yes, this one is tough to read.

[@Uvi3112]

it is exactly what i was looking for. Thanks!!

[@luisd.gonzalez6455]

Hey! I am attempting to install next js and before the terminal does it, it's asking me a few questions that I'm not sure how to answer. Here is what the terminal is asking me: Would you like to use TypeScript with this project? No / Yes Would you like to use ESLint with this project? No / Yes Would you like to use `src/` directory with this project? No / Yes Would you like to use experimental `app/` directory with this project? with this project? No / Yes What import alias would you like configured?

[@danielkim7071]

did you solve it?

[@lukas.webdev]

I think these prompts have changed again: 1. What is your project named? 2. Would you like to use TypeScript with this project? No / Yes 3. Would you like to use ESLint with this project? No / Yes 4. Would you like to use Tailwind CSS with this project? No / Yes 5. Would you like to use `src/` directory with this project? No / Yes 6. Use App Router (recommended)? No / Yes 7. Would you like to customize the default import alias? No / Yes For this tutorial you should choose: 2. No, 3. Yes, 4. Yes, 5. No, 6. Yes, 7. Yes

[@ernestechie]

Just when I was about creating my portfolio. Thank youuuu

[@xjimmyz_eso1303]

awesome vid! what theme/style is that in VS code? looks great :D

[@thepotatoofheaven]

if I made the react app with yarn create can I use npm install?

[@tadakuniyasuda8214]

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

[@blueHike19]

I think I will start learning next. What's the difference between react and next though?🤔

[@aayasir217]

Can someone please let me know why we use the next js and what is it? It seems directories are also changed due to the next js.

[@lukas.webdev]

Maybe I'll a video on it.. 😉

[@Zanktus]

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.

[@entopt6050]

hey there, with next.js changes that happened recently dose this tutorial still works ?

[@juhohamalainen5744]

Incase someone is facing the same problem as I with the tailwind not changing the background color blue on 13:52. I had to save the globals.css again to get it work.

[@Trazynn]

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.

[@hamihash]

tried it out and customized it. amazing👌

[@currojugando6585]

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`.

[@daviddmg17]

when you install next js does it ask you a bunch of questions or is that just me?

[@JnAEdits]

same here I just said no and default and got different file types - which makes it difficult to follow the tutorial because the code differs in some of those files

[@lukas.webdev]

Yes it does ... I think these are the current prompts that you get: 1. What is your project named? 2. Would you like to use TypeScript with this project? No / Yes 3. Would you like to use ESLint with this project? No / Yes 4. Would you like to use Tailwind CSS with this project? No / Yes 5. Would you like to use `src/` directory with this project? No / Yes 6. Use App Router (recommended)? No / Yes 7. Would you like to customize the default import alias? No / Yes I think for this tutorial you want to choose: 2. No, 3. Yes, 4. Yes, 5. No, 6. Yes, 7. Yes

[@daviddmg17]

@@lukas.webdev cool thanks!

[@eliyahutarab4862]

Hey Ed thank you for this , can you make a crash course of React with Typescript?

[@propavangameryt405]

do u mean crush course (for your crush ?) 🤣🤣🤣🤣

[@ethisfreedom]

@@propavangameryt405 so funny bro how did you come up with such a joke?

[@Mohd_Zaid_khan]

@@propavangameryt405 wtf is that joke

[@GothrythmFactory]

Thank you Ed you are always so kind.

[@vadneydasilva230]

Thank you very much for the great content Ed... :D 😁

[@rakeshwasnik9327]

how did u switch to react at 10:44

[@respectthedripkaren4515]

i've never worked with frameworks in web development before, so this'll be interesting to use.

[@crazymexicandope]

That was incredibly straight forward and helpful. Thank you so much :) 10/10

[@lukas.webdev]

I just posted a Tailwind CSS Tutorial for Beginners (in 2023) ... would love to hear, what you think about my video on this topic? 🤔

[@daviddmg17]

where did you get the image for the dev ed?

[@أيوبجاسممحمد-ن3خ]

Can I use React without Next to build that?

[@lukas.webdev]

Yes, you can use Vite instead... I just posted a tutorial/crash course about Tailwind CSS in 2023 - this should be exactly what you are looking for... 😉

[@arjunArunachalan]

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! 👍🎉

[@samirdave3826]

This is my first time building something with js and I can say that it is really engaging and cool to see different features available. Can anyone please suggest or share on how to add urls to the social media icons?

[@winterinfebruary]

add an anchor tag then just link it like normal html

[@hakamnabhani3382]

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

[@mldemigod]

mega tutek more such subscription added :) Tailwind an React there is power.

[@lukas.webdev]

Yes! Tailwind + React is awesome! 😉

[@protopan7722]

Hey are you going to make a node js course? that will be much appreciated thanks great video btw

[@mitchellalton402]

Is anyone else having issues with centering the images on the cards? the "text-center" in the video shows it working for him, however it doesn't work for me. I've tried "justify-center" with flex as well, and it doesn't work.

[@minthantoo3509]

I had the same problem. Try adding 'mx-auto' class on img tag. it will work.

[@MrTomro]

@@minthantoo3509 ty

[@MalcolmMutare]

You had me at BG!!

[@josikie]

Thank you Ed! Much love

[@outplay3759]

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?

[@berat2690]

padding also increases the space INSIDE, whereas margin does OUTSIDE.

[@Arkemix30]

Hi, I'm kinda new into front-end dev (I'm a backend dev). I just want to know when I should use padding instead of margin (and vice-versa)?

[@souravchaudhary2585]

When you want to give gap between your content and border. Margin is gap between your content border and rest of the element

[@Mwtorres89]

What theme are you specifically using here? It’s really nice

[@ricardocarvalhomiguel2684]

Ocean High Contrast

[@vivekprajapat105]

this is reactjs or reactnext ??

[@loving_Fruits669]

Hello, excuse me. Which type of theme in VS that u r using in? May you let us know?

[@w3cs598]

I love that VSCode Theme. Is it a custom theme?

[@developedbyed]

It’s material theme, palenight 👍

[@w3cs598]

@@developedbyed Thanks a lot. I'll try it out now and see how I like it!

[@Mwtorres89]

It looks different on my screen.. hmmm

[@Mwtorres89]

Looks more like material theme ocean… hmm

[@nhlanhlahlengwa2631]

Wow explained everything nice. So how do i make the resume button to work

[@fandibayu2162]

So amazing bro!

[@zenketsu828]

im currently learning from your video and my image service section is not cantering

[@Alex-nb8vb]

anyone else's index.js file not matching up with the one he's editing

[@lukas.webdev]

That's because the boilerplate code has changed... If you want a more up to date video: I just posted a Tailwind CSS Tutorial (2023) ... This should help you. 😉

[@euphol]

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.

[@nohal]

where did you get those images such as deved?

[@AlexStefan-vs2dj]

What is better? Tailwind css, styled components or scss modules ?