Build a React Portfolio Website With Tailwind Tutorial

Поділитися
Вставка

КОМЕНТАРІ • 396

  • @donnarex4398
    @donnarex4398 2 роки тому +114

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

  • @AlexanderTVEducation
    @AlexanderTVEducation 2 роки тому +121

    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
      @andifaizal6848 2 роки тому +1

      Congratulation dude 🎉

    • @ashimshrestha4004
      @ashimshrestha4004 2 роки тому +1

      inspiring bro. Congrats

    • @h2beatzstudio
      @h2beatzstudio 2 роки тому

      how can I land a job bro?

    • @AlexanderTVEducation
      @AlexanderTVEducation 2 роки тому +4

      @@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
      @ahmadimamadyan1396 Рік тому

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

  • @oezer
    @oezer Рік тому +12

    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

  • @deniskantic1115
    @deniskantic1115 2 роки тому +19

    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.

  • @nada125love
    @nada125love Рік тому +2

    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

  • @bravinrutto8784
    @bravinrutto8784 2 роки тому +5

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

    • @lukas.webdev
      @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 ... 😉

  • @cggs3001
    @cggs3001 2 роки тому +20

    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
      @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
      @astik2002 Рік тому

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

  • @samuelkamau1550
    @samuelkamau1550 2 роки тому +3

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

  • @balisha100
    @balisha100 Рік тому +1

    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

  • @HrissW
    @HrissW 2 роки тому +13

    Make more of these, These are SUPER HELPFUL! 💯

  • @Jonasmelonas
    @Jonasmelonas Рік тому +2

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

  • @paschalynukwuani6930
    @paschalynukwuani6930 Рік тому

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

  • @udayrajvadeghar8555
    @udayrajvadeghar8555 8 місяців тому +1

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

  • @PaulRichardEdits
    @PaulRichardEdits Рік тому +1

    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.

  • @sreekartammana
    @sreekartammana 2 роки тому +115

    Previous name of the channel was so nice than now🌝

    • @mrsameergaming6031
      @mrsameergaming6031 2 роки тому +2

      What was ??

    • @adomicarts
      @adomicarts 2 роки тому +20

      @@mrsameergaming6031 Dev Ed

    • @Darkgx5
      @Darkgx5 2 роки тому +24

      Yeah Dev Ed was better

    • @DanteMishima
      @DanteMishima 2 роки тому +7

      So i'm not the only one who thinks so

    • @abubalo
      @abubalo 2 роки тому +6

      Yes, this one is tough to read.

  • @rio8924
    @rio8924 2 роки тому +4

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

    • @lukas.webdev
      @lukas.webdev Рік тому

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

  • @BobbyBundlez
    @BobbyBundlez Рік тому +1

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

  • @josikie
    @josikie Рік тому +1

    Fell in love with Tailwind

  • @liza-px1zn
    @liza-px1zn Рік тому +3

    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.

  • @JavaScriptJolt
    @JavaScriptJolt 2 роки тому +4

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

  • @kj-hw4qw
    @kj-hw4qw Рік тому +15

    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
      @stago3612 Рік тому

      didn't fix it for me

    • @_justkarl
      @_justkarl Рік тому +16

      or you can use mx-auto inside the img tag

    • @Xaffre
      @Xaffre Рік тому

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

    • @Sauceskiii
      @Sauceskiii Рік тому +5

      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
      @patrickrooney6460 Рік тому

      @@_justkarl this worked for me!

  • @Scorpion2321-o9o
    @Scorpion2321-o9o 2 роки тому +1

    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.

  • @1Atheeleyah
    @1Atheeleyah Рік тому +1

    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

  • @shree4641
    @shree4641 Рік тому +1

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

  • @gyovanisantos85
    @gyovanisantos85 Рік тому +2

    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!

  • @modoulaminceesay9211
    @modoulaminceesay9211 Рік тому

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

  • @akashjaiswar9437
    @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

  • @mostlydevs4277
    @mostlydevs4277 2 роки тому +2

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

    • @lukas.webdev
      @lukas.webdev Рік тому

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

  • @abubalo
    @abubalo 2 роки тому +1

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

  • @KeelanJon
    @KeelanJon 2 роки тому +2

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

  • @rengga7021
    @rengga7021 6 місяців тому

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

  • @MiaHere-g9n
    @MiaHere-g9n Рік тому +1

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

  • @ameenmohiyuddin8798
    @ameenmohiyuddin8798 Рік тому +2

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

  • @alexfriedman8670
    @alexfriedman8670 Рік тому

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

  • @odkhuu5723
    @odkhuu5723 2 роки тому

    i love your character man, very humble

  • @warrayn10
    @warrayn10 Рік тому

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

  • @zoen5192
    @zoen5192 2 роки тому +1

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

  • @kevinwaag9976
    @kevinwaag9976 Рік тому +1

    you're a freaking brilliant teacher!

  • @andifaizal6848
    @andifaizal6848 2 роки тому +2

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

  • @paoloalayacyac6346
    @paoloalayacyac6346 2 роки тому +1

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

  • @arjunArunachalan
    @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! 👍🎉

  • @kaderlakhdar5735
    @kaderlakhdar5735 Рік тому +2

    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
      @PiyushSharma12479 8 місяців тому

      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

  • @syed9846
    @syed9846 Рік тому +1

    Thank you ed, for this awesome tutorial

  • @ZaiyordNurdin
    @ZaiyordNurdin Рік тому

    A really underrated channel

  • @tadakuniyasuda8214
    @tadakuniyasuda8214 2 роки тому

    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

  • @hakamnabhani3382
    @hakamnabhani3382 2 роки тому

    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

  • @crazymexicandope
    @crazymexicandope Рік тому +2

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

    • @lukas.webdev
      @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? 🤔

  • @mhlib7569
    @mhlib7569 2 роки тому +1

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

  • @chacalfmp
    @chacalfmp Рік тому

    Great tutorial! Cheers from Brazil!

  • @kyriakosbekas
    @kyriakosbekas 2 роки тому +2

    That's a great tutorial Ed, thanks!!

  • @ernestechie
    @ernestechie 2 роки тому

    Just when I was about creating my portfolio. Thank youuuu

  • @okyanawangramadhana4879
    @okyanawangramadhana4879 2 роки тому

    I've been waiting for this content for years

  • @Trazynn
    @Trazynn 2 роки тому +1

    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.

  • @Uvi3112
    @Uvi3112 Рік тому

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

  • @devMohaimin
    @devMohaimin 2 роки тому

    We want more Like this. This is very useful

  • @respectthedripkaren4515
    @respectthedripkaren4515 2 роки тому

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

  • @mldemigod
    @mldemigod Рік тому +1

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

    • @lukas.webdev
      @lukas.webdev Рік тому

      Yes! Tailwind + React is awesome! 😉

  • @GothrythmFactory
    @GothrythmFactory 2 роки тому

    Thank you Ed you are always so kind.

  • @hamihash
    @hamihash Рік тому

    tried it out and customized it. amazing👌

  • @AzadarieHussainya
    @AzadarieHussainya 2 роки тому

    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.

    • @_Bataklik
      @_Bataklik 2 роки тому +2

      I think because nextjs is a bit faster then create-react-app.

    • @julians.2597
      @julians.2597 Рік тому

      create react app at this point is deprecated and you should stop using it in favour of e.g. Vite or NextJS

  • @niklasmartinsson3719
    @niklasmartinsson3719 Рік тому +4

    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

  • @vadneydasilva230
    @vadneydasilva230 Рік тому

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

  • @SwatiSrivastav-cs6hl
    @SwatiSrivastav-cs6hl 7 місяців тому

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

  • @josikie
    @josikie Рік тому

    Thank you Ed! Much love

  • @FaithOlusegun
    @FaithOlusegun 2 роки тому

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

  • @fatemahalthenyan398
    @fatemahalthenyan398 2 роки тому +1

    It's amazing, thank you so much.

  • @henriquet.tyminski3223
    @henriquet.tyminski3223 Рік тому +1

    Thank you so much

  • @JavohirMiraxtamov
    @JavohirMiraxtamov 2 роки тому +1

    Great as always

  • @Zanktus
    @Zanktus 2 роки тому +1

    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.

  • @cristhianrogletek2249
    @cristhianrogletek2249 2 роки тому

    THANKS FOR THE TUTORIAL MEEEN!! GOD BLESS YOU

  • @blue_berry_pie64
    @blue_berry_pie64 2 роки тому +3

    More Reactjs please 😊 and Tailwindcss

    • @lukas.webdev
      @lukas.webdev Рік тому +1

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

  • @bryanwi09
    @bryanwi09 2 роки тому +4

    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 UA-cam that I have found showing this setup. Please and thank you!! If not, it was worth a shot!

  • @licokr
    @licokr 2 роки тому

    Thank you! This is a great video!

  • @Jytaani
    @Jytaani Рік тому +2

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

    • @meghaiiitd4586
      @meghaiiitd4586 10 місяців тому

      same, unable to find

    • @glebt2429
      @glebt2429 3 місяці тому

      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
      @Jytaani 3 місяці тому

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

  • @agbalenyoelvis
    @agbalenyoelvis 2 роки тому

    Very good video. Like it very well. Tailwind is powerful

  • @xjimmyz_eso1303
    @xjimmyz_eso1303 2 роки тому +1

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

  • @fedorevseev8867
    @fedorevseev8867 2 роки тому

    Awesome portfolio website) highly recommend

  • @0xbinary
    @0xbinary 2 роки тому

    Thank you. Please add comments and fix the vscode lines so we are able to see the complete code and code along without having to open the github and check what we missed.

  • @shashikantmarskole
    @shashikantmarskole 2 роки тому

    thank u for the content. nice and helpful. keep it up 👍

  • @MalcolmMutare
    @MalcolmMutare Рік тому

    You had me at BG!!

  • @protopan7722
    @protopan7722 2 роки тому +2

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

  • @marcinzale
    @marcinzale 2 роки тому

    Great tutorial! Thank you!

  • @ozankurucu6261
    @ozankurucu6261 2 роки тому

    Thank you for this video!

  • @samirdave3826
    @samirdave3826 Рік тому +1

    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
      @winterinfebruary Рік тому +1

      add an anchor tag then just link it like normal html

  • @jonnelalgara9108
    @jonnelalgara9108 2 роки тому +1

    Practice makes you learn a million tis faster. I learned that when I started.

  • @Tyheir
    @Tyheir Рік тому

    I would have liked to see you use react components and props but great video overall

  • @ltd5480
    @ltd5480 Рік тому

    44:30 greate responsive stuffs there

  • @tonyconor681
    @tonyconor681 Рік тому

    DevED IS the best bcz old is gold

  • @zakiro4277
    @zakiro4277 Рік тому

    Улыбка конечно приятная)

  • @blueHike19
    @blueHike19 Рік тому

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

  • @Muhammed-nani964
    @Muhammed-nani964 2 роки тому

    noice & we need some projectes with redux toolkit

  • @eliyahutarab4862
    @eliyahutarab4862 2 роки тому +3

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

    • @propavangameryt405
      @propavangameryt405 2 роки тому +1

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

    • @ethisfreedom
      @ethisfreedom 2 роки тому +1

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

    • @Mohd_Zaid_khan
      @Mohd_Zaid_khan Рік тому

      @@propavangameryt405 wtf is that joke

  • @floraetteh1516
    @floraetteh1516 2 роки тому

    Thanks so much, Ed

  • @fandibayu2162
    @fandibayu2162 2 роки тому

    So amazing bro!

  • @nurmohammad9803
    @nurmohammad9803 2 роки тому

    Thanks for create react project,
    to be awesome

  • @Edxylom
    @Edxylom 2 роки тому

    Thanks men you're amazing

  • @nirajnaveen8007
    @nirajnaveen8007 2 роки тому

    I thought you have 2nd channel then saw the subscribers

  • @patriotlightning7791
    @patriotlightning7791 2 роки тому

    Well done my dear.

  • @javascriptes
    @javascriptes 2 роки тому

    The balloon! But, why!?!? LOL

  • @rapidloop
    @rapidloop 2 роки тому

    Good content as usual