How To Create Portfolio Website In React JS | Complete React JS Website Project Tutorial

Поделиться
HTML-код
  • Опубликовано: 20 май 2024
  • Learn How To Create Portfolio Website In React JS. Build Complete React JS Website Step by Step and deploy it online.
    👉 Source code: greatstack.dev/go/alex
    SUBSCRIBE: @GreatStackDev
    ❤️ Complete JavaScript Course with Certification:
    👉 greatstack.dev/go/javascript-...
    ✔️ Beginner + Advance + ES6 + Notes
    ✔️ 30 Project With Source Code
    ✔️ React Beginner course with project
    ✔️ Course Completion certificate
    ✔️ Chat Support
    In this tutorial you will learn to build and deploy complete responsive portfolio website using React JS. This website will be completely responsive and we will add react smooth scroll and working contact form on this personal portfolio website. You can receive the contact form enquirers on your email address. This React JS portfolio website will be a great react project for beginners.
    Download Assets: drive.google.com/file/d/104e4...
    Get web hosting and domain:
    👉greatstack.dev/go/hostinger
    Watch Full Stack E-commerce Website tutorial:
    👉 • How To Create Full Sta...
    -------------------------
    Timestamp:
    00:00 Portfolio Website Overview
    03:52 React Project Setup
    10:11 Create Navigation Bar
    19:32 Create Website Header section
    30:29 Create About Section
    51:04 Create Services Section
    01:08:57 Create My Work Section
    01:23:50 Create Contact Section
    01:46:54 Create Footer for the website
    02:08:00Add Smooth Scroll on Website
    02:14:43 Send contact form data on email
    02:19:29 Make the website responsive
    02:55:42 Deploy website online
    -----------------------------------------
    Suggested Course:
    Complete JavaScript course with 30 projects:
    👉 greatstack.dev/go/javascript-...
    Complete HTML and CSS with 8 projects:
    👉 easytutorialspro.com/go/course/
    -------------------------------------
    Recommended Videos:
    Beginner's HTML and CSS tutorial:
    ► • HTML And CSS Tutorial ...
    Beginner's JavaScript tutorial:
    ► • JavaScript Full Course...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make fitness website design using HTML CSS:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make a Job Portal website design with HTML & CSS:
    ► • How To Make Website Us...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------
    Stock Image and icon credit:
    pexels.com
    -------------------------------------
    Connect with me:
    👉 linktr.ee/iamavinashkr
    Connect with GreatStack:
    Instagram: / greatstackdev
    Twitter: / greatstackdev
    Facebook: / greatstack

Комментарии • 83

  • @GreatStackDev
    @GreatStackDev  13 дней назад +1

    👉 Source code: greatstack.dev/go/alex

  • @danielsuccess1841
    @danielsuccess1841 Месяц назад +1

    My Best RUclipsr Coding Tutor ❤
    Thank you sir for this

  • @adebowaleadegboye8623
    @adebowaleadegboye8623 Месяц назад +2

    Great job so far thanks I am following you

  • @umangraval73
    @umangraval73 Месяц назад +1

    man is make content according to my needs lol
    i was just taking to my friend that i want to make portfolio website a you fullfill my need Master.🙏🙏

  • @kajackpi_8
    @kajackpi_8 Месяц назад +1

    You're a life saver bro!!!!

  • @Fnydo
    @Fnydo Месяц назад +1

    Thanks you sir for creating this tutorial.😢😊

  • @bkimking
    @bkimking 13 дней назад

    Great work greatstack. learned alot.

  • @bennysimisi1046
    @bennysimisi1046 Месяц назад +1

    It's perfect, I learn every day with you, especially since recently I started learning React js. Otherwise why create buttons with a DIV tag?

  • @piyush0mandloi
    @piyush0mandloi Месяц назад

    Thankyou sir with this awesome content.

  • @haifrendz
    @haifrendz Месяц назад +2

    perfect step by step explanation for beginners......waiting for next js tutorial

    • @ganeshsharma5810
      @ganeshsharma5810 2 дня назад

      how should i change logo name to my name pls explain

  • @-mohammadalakedy5417
    @-mohammadalakedy5417 Месяц назад +7

    You the best , Big Thanks From Syria ❤ I'm waiting the Food Dilvery App Backend Section Bro ❤❤

  • @blackpinkdumplings
    @blackpinkdumplings Месяц назад

    ill do for sure tq bro

  • @codefiltered
    @codefiltered Месяц назад

    best tutorial🤩🤩

  • @eugeenhunter7384
    @eugeenhunter7384 Месяц назад

    A great video i have to try it out.....please do provide the other video for the back end of the food delivery

  • @LaluMuhamadSaleh
    @LaluMuhamadSaleh 12 дней назад

    i like it this channels..very perfect

  • @sajeeb8797
    @sajeeb8797 День назад

    your videos so much helpful
    😇😇

  • @gabrielkingori3375
    @gabrielkingori3375 Месяц назад

    wow bravo, lovely

  • @francislungu815
    @francislungu815 Месяц назад

    Am third... 😀😀
    Great stuff man.. You the best.

  • @jidesamuel6521
    @jidesamuel6521 Месяц назад

    You never disappoint

  • @miazitechbd
    @miazitechbd Месяц назад +1

    If do not thank for this project it is absolutely inference. I hope you will be putting this project using Tailwind shortly.

  • @drexk6569
    @drexk6569 Месяц назад

    Great Job thank you a lot, please dedicate a video on how to create a website with log in where one can can reset forgot password

  • @priyaranjan5584
    @priyaranjan5584 Месяц назад

    Nice portfolio website. Sir, please also upload backend part of Food Delivery Website as soon as possible.

  • @ujjawalpugalia2123
    @ujjawalpugalia2123 Месяц назад +1

    Please bring full mern stack projects as much

  • @CodeCs_YT
    @CodeCs_YT Месяц назад +1

    please sir make videos on angular 17 projects, angular is most demanded in big tech companies.

  • @indianmusic1770
    @indianmusic1770 Месяц назад +1

    Good

  • @soniakrishnan6436
    @soniakrishnan6436 28 дней назад

    Why do you delete the react.svg under asset folder? Because when i deleted that, the host stated file/path is missing and error instead of a clean screen?

  • @ajiteshmishra0005
    @ajiteshmishra0005 Месяц назад

    Please upload one video containing concepts Redux, Redux Saga, Redux Thunk in any React Application
    If it is possible to JWT also so it will be good for React Aspirants

  • @ayoubelandaloussi-nx4xv
    @ayoubelandaloussi-nx4xv 26 дней назад

    very good video, I aprechiate your effort, I have a question, when I click on the services for example in the navbar, the anchor link takes me to it, but when I scroll up back the underline in the navbar stays in the services, how can I solve this issue and thank u

  • @igbinidujeremiah1490
    @igbinidujeremiah1490 20 дней назад

    Nice work but how did you come about your service data

  • @AzizulHaque-vh8qc
    @AzizulHaque-vh8qc 17 дней назад

    Which theme u are using in Vs Code?

  • @KiranKumar-md7uh
    @KiranKumar-md7uh Месяц назад

    We need more

  • @DeadlyGamerBD
    @DeadlyGamerBD Месяц назад

    Sir plz make tutorial or use in website tailwind css plz sir its very demanding now rather than plain css so sir plz make tailwind css tutorial 🙏

  • @smallboy3559
    @smallboy3559 Месяц назад +1

    Bro plz continue the food ordering website TOMATO series. U r not posted the continuation...
    Plzzzzz continue that one.

  • @dreamCode807
    @dreamCode807 Месяц назад

    Sir please post tutorial of admin panel

  • @sachin0507
    @sachin0507 Месяц назад +1

    Any reason for using always plain css ???

  • @blackpinkdumplings
    @blackpinkdumplings 26 дней назад

    fr me anchor link smooth scroll error /// just about and contact section ,,, form is running good

  • @arpitgupta5607
    @arpitgupta5607 16 дней назад

    bro if we add our image how edit image in that

  • @anaghathorat2862
    @anaghathorat2862 Месяц назад

    Sir from which website have you created the logo? ALEX . I too wanted to make a custom logo for my portfolio. and thank you for this tutorial, it helped me a lot

    • @idevkr
      @idevkr Месяц назад

      u can use canvas

  • @hindikhaniachiachi
    @hindikhaniachiachi Месяц назад

    Sir create a currency converter using HTML CSS and JavaScript 😊😊😊😊

  • @piyush0mandloi
    @piyush0mandloi Месяц назад

    500+ done

  • @shivaaaa203
    @shivaaaa203 Месяц назад +2

    Im 1st😅❤

  • @Afganmedia42033
    @Afganmedia42033 Месяц назад

    make a dynamic web bro please

  • @Benbeckmann3739
    @Benbeckmann3739 Месяц назад +6

    You people saying you'll try the code on a 3 hr long video after 20 mins are crazy

  • @simaokane
    @simaokane Месяц назад +2

    Hello Sir, I really appreciate your work. Is it possible to activate the subtitles, please?

    • @UpShares
      @UpShares Месяц назад +1

      🤣

    • @simaokane
      @simaokane Месяц назад

      @@UpShares I don't understang very well english...

  • @malvernmabvira1562
    @malvernmabvira1562 Месяц назад +1

    Installed anchorlinksmoothscroll, how can i import the AnchorLink from react?

    • @idevkr
      @idevkr Месяц назад +1

      U have to import it from anchor link smooth scroll package

  • @UpShares
    @UpShares Месяц назад

    it looks cook thought

  • @arpitgupta5607
    @arpitgupta5607 16 дней назад

    where u create image??

  • @NoobCorporations
    @NoobCorporations Месяц назад +1

    Please Made A Full stack website bro 🙂 like for college ❤

    • @idevkr
      @idevkr Месяц назад

      its already on channel

  • @monishbl7254
    @monishbl7254 6 дней назад

    Comment stating design is similar to @pixiteezy's portfolio is now deleted, just wow 👍, good job mods and creator

  • @Jibonbd360
    @Jibonbd360 Месяц назад

    hey please share your vs code setting😢

  • @arpitgupta5607
    @arpitgupta5607 16 дней назад

    bro how to create image ?

  • @ajiteshdakua2023
    @ajiteshdakua2023 Месяц назад

    2:37:13

  • @blackpinkdumplings
    @blackpinkdumplings 27 дней назад

    smoothi scroll is not that perfect why I dt know

  • @eugenehunter6305
    @eugenehunter6305 Месяц назад

    under email submission am not getting any notification yet i have double checked everything, what might be the problems?? Please or kindly respond

    • @pulkitagrawal5091
      @pulkitagrawal5091 27 дней назад +1

      hey you need to use the hook which is used in the react form for email and under submit button you need to use {result} to submit the form on your email id

  • @arunkanagaraj1078
    @arunkanagaraj1078 Месяц назад

    How to buy source code?

  • @celticspyd5887
    @celticspyd5887 Месяц назад +1

    Sir i texted on insta What about Admin page of food delivery?

  • @asmawaheed3873
    @asmawaheed3873 Месяц назад

    how can we make usefull i meanwhen i share a url so people can see

    • @idevkr
      @idevkr Месяц назад

      deploy on platform like vercel or netlify

  • @CreativeMinds100
    @CreativeMinds100 Месяц назад

    Anchor link tag use after page will shows blank . 😢 Please help me anyone

    • @idevkr
      @idevkr Месяц назад

      make sure to import Anchor Link Tag

  • @user-sx8uq8xq9z
    @user-sx8uq8xq9z Месяц назад

    Please .i am your biggest subscriber . i want to create something like this , for my own . please share codes by any platform you can share with me . pleamse 😭

  • @thevikramsoni7352
    @thevikramsoni7352 Месяц назад

    where to make image icons

    • @idevkr
      @idevkr 28 дней назад

      u can use icons8

  • @abhishekcode
    @abhishekcode Месяц назад

    Is contact form working?

  • @sandyechon5608
    @sandyechon5608 Месяц назад

    Not responsive for hand phone.

  • @Vk585
    @Vk585 Месяц назад

    hey can anybody tell me the extension name

    • @idevkr
      @idevkr Месяц назад +1

      ES7+ React/Redux/React-Native snippets

  • @lakshanjayaweera6232
    @lakshanjayaweera6232 Месяц назад

  • @Myytthh
    @Myytthh Месяц назад

    Hello , i need your help with something so can i have your discord account or how can i manage to contact you while i can share screen ?
    i like watching ur channel btw