React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ต.ค. 2024

ความคิดเห็น • 1.3K

  • @David-cz7rf
    @David-cz7rf 4 ปีที่แล้ว +171

    Great tutorial! I bought the source code, hope you can continue doing this and making new awesome vids.

    • @briandesign
      @briandesign  4 ปีที่แล้ว +17

      Thanks for the support David! I plan on making more vids soon!

    • @achhatkumargupta2954
      @achhatkumargupta2954 3 ปีที่แล้ว +1

      Sir this responsibility or only please say?

    • @SHUUUSTER
      @SHUUUSTER 3 ปีที่แล้ว +1

      pass you source code , I don't have a credit card for a buy course

    • @dannyinformal
      @dannyinformal 3 ปีที่แล้ว

      @@briandesign Hey Brian, my svgs and pngs will not render. I'm at a loss right now

    • @takeabreak5251
      @takeabreak5251 3 ปีที่แล้ว +3

      I typed this exactly but my video is not getting played!

  • @nocapmusic7705
    @nocapmusic7705 2 ปีที่แล้ว +58

    If y'all are attempting this project using react-router-dom v6 you'll have to change Switch to Routes and in your Route component you have to change component to element. It should look like this --> . In the video this is at timestamp 2:49:26.

    • @shebeary
      @shebeary 2 ปีที่แล้ว +2

      This worked! thank you!!!!!! except mine is SignInPage instead of SigninPage

    • @verzuzstore7337
      @verzuzstore7337 2 ปีที่แล้ว +1

      I'm having an issue with displaying some of the elements in the InfoSection (p, heading and button) I was able to display the img but not the right of the elements. can you help?

    • @johannadelatorre3167
      @johannadelatorre3167 2 ปีที่แล้ว +1

      You are a god amonst men

    • @ionutoceanu1434
      @ionutoceanu1434 2 ปีที่แล้ว

      🙏🏻 Thank you ! Much love !

    • @DonTownsendJr
      @DonTownsendJr 2 ปีที่แล้ว +1

      @@ennerie You are missing. import SigninPage from './pages/signin';

  • @mustafabahaa9201
    @mustafabahaa9201 3 ปีที่แล้ว +335

    for anyone having issue with image not loaded make sure you type
    img: require('../../images/svg-1.svg').default,

    • @angarabozkirli
      @angarabozkirli 3 ปีที่แล้ว +4

      still isn't loading, it find the location of .svg file, reads but doesn't load

    • @atharvaathalye
      @atharvaathalye 3 ปีที่แล้ว

      @@angarabozkirli Did your problem got fixed?

    • @angarabozkirli
      @angarabozkirli 3 ปีที่แล้ว

      @@atharvaathalye no, I didn’t try further

    • @atharvaathalye
      @atharvaathalye 3 ปีที่แล้ว

      @@angarabozkirli check your styled components for IMG I accidentally typed image that's why my image was not getting rendered

    • @sanskarkaazi3830
      @sanskarkaazi3830 3 ปีที่แล้ว

      Do you know what would happen if there was no z-indexes whatsoever in this project?

  • @kanojvora2491
    @kanojvora2491 3 ปีที่แล้ว +39

    For anyone struggling to get the image to show do this:
    1. add an import statement at the top of the index.js file on infosection. import ImgCar from "../../images/car.svg"
    2.
    It's not the same as in the tutorial but this gets the image to show
    EDIT:
    Mustafa Bahaa posted a much more eloquent solution to this, he suggested adding .default to the end of the require statement.

    • @areejgabriellerollon7797
      @areejgabriellerollon7797 3 ปีที่แล้ว +3

      thank you. The .default worked for me.

    • @rockdrotl
      @rockdrotl 3 ปีที่แล้ว +1

      This one worked for me, thanks brooooooooo

    • @anthonymazzie4237
      @anthonymazzie4237 3 ปีที่แล้ว

      Worked for me

    • @anthonymazzie4237
      @anthonymazzie4237 3 ปีที่แล้ว

      @kanoj if you add that code to index.js, how do you make the other sections use different images?
      Thanks

    • @matiasbenites1416
      @matiasbenites1416 2 ปีที่แล้ว +1

      That .default has save me. Tyyy

  • @Syndrms
    @Syndrms 4 ปีที่แล้ว +137

    Very rare to see react tutorials with actually good designs. You deserve the best, thank you for your amazing videos

  • @tebogo10
    @tebogo10 3 ปีที่แล้ว +71

    Helpful hint - vscode has an extension for styled components

    • @askarihassan1636
      @askarihassan1636 3 ปีที่แล้ว +4

      Thanks a lot man. I was wondering why mine was highlighted as a string and his was not.

    • @afrosoul4eva
      @afrosoul4eva 3 ปีที่แล้ว +4

      thanks so much

    • @Arknaes54
      @Arknaes54 3 ปีที่แล้ว +1

      Thank you, was just the comment i was looking for :D

    • @arturs9452
      @arturs9452 3 ปีที่แล้ว +3

      Pin !
      Without this plugin it's pain

    • @jondiez2673
      @jondiez2673 3 ปีที่แล้ว +2

      u saved my life! thank you so much!

  • @8ktk
    @8ktk 4 ปีที่แล้ว +18

    Unlike other channels, you not only teach React, but also focus on the design part of it which is immensely helpful. Thanks a ton, expecting more amazing content :D

    • @briandesign
      @briandesign  4 ปีที่แล้ว +4

      Thanks Karthik! Yeah I like CSS lol so I tend to spend more time messing around with design stuff

    • @loquaciouslaura5641
      @loquaciouslaura5641 4 ปีที่แล้ว +1

      @@briandesign Loving the design stuff you've included! It makes your sites look really professional. Can't believe you've not been doing this for very long!

    • @briandesign
      @briandesign  4 ปีที่แล้ว +1

      @@loquaciouslaura5641 Thanks Laura!

  • @codeaperture
    @codeaperture 3 ปีที่แล้ว +3

    I finally found the best front-end channel. god level styling skills

  • @sotonye-m
    @sotonye-m ปีที่แล้ว

    Hey, Thanks for this.
    I am a software engineer who hated frameworks and wasn't too familiar with javascript, I wrote Java, C# before, A year ago I watched this and decided to give React a chance, Thanks to this video I got my first job as a React Developer just 2 months after watching this video (I had been an engineer for 4 years prior tho), and now I am a frontend developer, I love using react and styled-components so much, it's my fastest way to build stuff.

  • @jroseme
    @jroseme 2 ปีที่แล้ว +9

    Bro I'm only like halfway through but this tutorial is clicking so much more for me than other, much longer and more in depth tutorials. I think maybe it's the order you are going through, combined with the pace. So relieved, finally this React stuff is starting to click in my boomer object oriented brain. Thank you.

  • @andhytaslin7907
    @andhytaslin7907 3 ปีที่แล้ว

    Video duration 4 hour = 4 day for learn from zero until create a responsive website... great tutorial... you give me all i want

  • @dabzbmg3197
    @dabzbmg3197 3 ปีที่แล้ว +5

    These are going to help me get a job and when I am back on my feet Ima forward you for the source code still.Your a blessing still my guy.

  • @Kevin-cg7qk
    @Kevin-cg7qk 2 ปีที่แล้ว +2

    Finally, someone who understands the importance of design!

  • @remyfamily8652
    @remyfamily8652 4 ปีที่แล้ว +6

    Awesome tutorial! Fellow developers, in case you want to add extra pages like a signup you need to add a few thing extra props onto your styled-component.
    Example:

  • @isalvesilva
    @isalvesilva 2 ปีที่แล้ว

    thanks from Brazil, i'm glad that you just give us this full content for free.. at moment, i cant help with money but here is my thank you! I learn a lot with this video !!

  • @sexrp2380
    @sexrp2380 3 ปีที่แล้ว +12

    That was great! I've never used styled components before and all the repetition and patterns you've demonstrated truly helped me build a strong foundation! Thank you!

    • @prenusree8232
      @prenusree8232 ปีที่แล้ว

      Hey, how can we install styled components

  • @saidevla
    @saidevla 3 ปีที่แล้ว

    The most i like of your tutorials is you don't leave any case of doubt behind. I'm watching what you doing and at the moment that I stop and ask myself, what if i want to...? you say "and if you wanna try this, then you have to..." it's amazing. Thanks for all!

  • @didactics740
    @didactics740 3 ปีที่แล้ว +40

    hint: if the images aren't loading in your react, use .default suffix to your img value/path

    • @hrithikgoswami9808
      @hrithikgoswami9808 3 ปีที่แล้ว +1

      thanks it worked

    • @aisahtaufik8627
      @aisahtaufik8627 2 ปีที่แล้ว +1

      hi how do you mean with that, can you write the code please. it doest work for me :(
      "img: require('../../images/svg1.svg'),"

    • @redmanly1
      @redmanly1 2 ปีที่แล้ว +15

      @@aisahtaufik8627 "img: require('../../images/svg1.svg')," would now be "img: require('../../images/svg1.svg').default,"

    • @ryan13547
      @ryan13547 2 ปีที่แล้ว

      thanks a lot bro...how did you even find the solution to it??

    • @cintiasouza5751
      @cintiasouza5751 2 ปีที่แล้ว

      thanks *-*

  • @dev_willyy
    @dev_willyy 2 ปีที่แล้ว +1

    This video is amazing..Infact, Brian becane very tired at the end of the video.
    many thanks goes to you, Brian.
    you've earned a relentless subscriber from Nigeria!🔥🙌

  • @renatilyasov6873
    @renatilyasov6873 3 ปีที่แล้ว +13

    For the svg loading problem I noticed that in InfoElements.js I wrote "styled.div" instead of "styled.img". Great tutorial! Thanks

    • @briandesign
      @briandesign  3 ปีที่แล้ว +2

      glad you figured it out! those syntax errors always get me haha

    • @shubhamsingh4701
      @shubhamsingh4701 3 ปีที่แล้ว +2

      you comment saved my life ! 😅✌️

    • @kayjay4906
      @kayjay4906 3 ปีที่แล้ว +1

      Thanks brother
      your comment saved my life ! 😅✌️ (copied)

    • @spencertoogood
      @spencertoogood 2 ปีที่แล้ว

      Nice! This has had me stumped for the last hour!

  • @ViewsofZen
    @ViewsofZen 2 ปีที่แล้ว +1

    Took me a couple months to fully complete but I'm glad I did, got a lot of knowledge out of this tutorial

    • @OsundareToheeb
      @OsundareToheeb 2 ปีที่แล้ว

      Hi, nice to hear that, I wanna ask, do you have the same result as his??

  • @TUITKRISHNAKUMAR
    @TUITKRISHNAKUMAR 4 ปีที่แล้ว +18

    TH-cam has many tutorial on react , but in most part they skip the css part, which ended me as a poor css scripter. After following your videos, it became more clear and concise😉❤️

    • @briandesign
      @briandesign  4 ปีที่แล้ว +3

      Thanks! Yeah I noticed not many people focus on CSS at all or just copy and paste it into their code with tutorials with more advanced languages.

    • @loquaciouslaura5641
      @loquaciouslaura5641 4 ปีที่แล้ว

      @@briandesign I agree, the CSS element you include is very in depth. I feel total novice at this and would like to ask, where/how did you learn CSS so well?

    • @MrZxcvbnm22
      @MrZxcvbnm22 4 ปีที่แล้ว

      @@briandesign Is it worth learning React? I'm a designer with basic notions of coding and programming (JS and PHP). But the website on the video is pretty easy to make using Webflow. I could build it in 2 hours... Without writing any code.

    • @briandesign
      @briandesign  4 ปีที่แล้ว

      @@MrZxcvbnm22 yeah you can build almost any static site with wordpress/webflow etc. so unless you are trying to do something that requires react or any coding language, then it would make sense to learn it. If you don't plan on using it ever, then I don't see why you would want to use it

    • @MrZxcvbnm22
      @MrZxcvbnm22 4 ปีที่แล้ว

      @@briandesign but whats th point of using react? (Serious question). Because now I'm using Webflow and I cant see the why. I'm building a concept web similar to Netflix. With the same interactions to see how far I could get and for now Webflow is enough.
      ps: You used 'static', 'Wordpress' and 'Webflow' on the same sentance... xD

  • @DeCodewithMinte
    @DeCodewithMinte 4 ปีที่แล้ว +2

    You teach not only how to develop in react but how to develop like a pro with a clean codebase. Just Awesome

  • @carolinemendez2902
    @carolinemendez2902 4 ปีที่แล้ว +15

    Your React using Styled Components have been a life saver. Hoping you do an ecommerce type of website soon! Would love to see what you do with that style

    • @briandesign
      @briandesign  4 ปีที่แล้ว +6

      Thanks Caroline! Yeah I plan on making one in the future!

  • @twiincentral8780
    @twiincentral8780 3 ปีที่แล้ว +1

    Thank you for starting the video with the end result! So many videos out there where you have to wait a very long time before you can even see what is being built. Liked and subscribed.

  • @rolaunsvideos
    @rolaunsvideos 3 ปีที่แล้ว +27

    on the Styling hero section you forgot to include an ";" on z-index in the herocontainer, than you saved the file and (probably prettier) made the correction. Btw, i'm new here and i'm really enjoying react, thanks a lot man

  • @hassasraf
    @hassasraf 3 ปีที่แล้ว +2

    I am love in with react after saw this video. Amazing content on youtube. I didn't saw this type of video on youtube yet.

  • @davidmchale3149
    @davidmchale3149 3 ปีที่แล้ว +11

    use: 'import styled from 'styled-components/macro'; and you'll get the styled component name on the class instead of just random div classes created by the styled-components package

    • @codeAlongwith
      @codeAlongwith 3 ปีที่แล้ว

      If this is placed in the style sheet then it will get a conflict due to the existance of import styled from 'styled-components'; ?

  • @aisha8601
    @aisha8601 2 ปีที่แล้ว

    Wow, you're amazing! This is the second video I came across of yours in the last hour and I'm deffo a subscriber now!! Can't wait to see what else you post!

  • @anthonyesmeralda9168
    @anthonyesmeralda9168 4 ปีที่แล้ว +3

    Yooo, your channel is an absolute blessing. Learning and coding react apps is a lot more enjoyable now.

  • @AnteZivkovic
    @AnteZivkovic 3 ปีที่แล้ว +1

    I love that we just go through the code and debug along the way. It really adds to realism!

  • @florianfevrier8321
    @florianfevrier8321 3 ปีที่แล้ว +13

    If you're images aren't loading and you have [object Module] in the src attribute, put .default after require() like that "require('../../img/svg-1.svg').default" it worked for me.

    • @flyingpolishmonk911
      @flyingpolishmonk911 3 ปีที่แล้ว

      It worked for me as well, thank you for the tip Florian !

    • @EdgarJRojasL
      @EdgarJRojasL 3 ปีที่แล้ว

      Thanks a lot man!!! You've solved my problem with the image.....

    • @sugammainali7069
      @sugammainali7069 3 ปีที่แล้ว

      You da best . Thanks for the help may u never get corona :-D lol

    • @amiraizin486
      @amiraizin486 3 ปีที่แล้ว

      Thank you !! It worked for me as well.

    • @DAWE12100
      @DAWE12100 3 ปีที่แล้ว

      Thank you!

  • @Akosiyawin
    @Akosiyawin 3 ปีที่แล้ว

    Bro, I've watched so many of your videos and just by looking at this design, I don't even need to watch this entire video at all to make this website, I think Im good enough to do all this by myself.

  • @pluginadvice182
    @pluginadvice182 3 ปีที่แล้ว +6

    Great tutorial bro, I would love you to explain more in-depth when you are typing the CSS/Styled-Component because we don't see the effect right away. Just a suggestion for upcoming projects ;)

    • @briandesign
      @briandesign  3 ปีที่แล้ว +1

      yeah I changed the way I show it in my future videos, so it's much easier to follow along

    • @khaibarkbee4443
      @khaibarkbee4443 3 ปีที่แล้ว

      @@briandesign is there a chance that you can resolve the failed to compile before you start styling so that we can actually what is happening it would be much easier to follow Thanks

  • @baremetals
    @baremetals 3 ปีที่แล้ว

    Excellent video, I sat through the course and then paid for the design. I will be using it for my Landing page.

  • @consoledoterror971
    @consoledoterror971 3 ปีที่แล้ว +8

    1:21:06 The problem is that you didn't have semi-colon at the end of line 12. But after saving, prettier formatted the file and added semi-colon.

  • @Willy.plu.g
    @Willy.plu.g 3 ปีที่แล้ว

    actually the best react video so far for me

  • @hjmiranda6193
    @hjmiranda6193 3 ปีที่แล้ว +1

    I just finished the tutorial and it took me at least 3 days. Awesome tutorial and I love how you debug the problems! New subscriber here!

  • @tanjiankai1796
    @tanjiankai1796 3 ปีที่แล้ว +3

    Hi, May I know why at 28:20 the "margin-top" causes the navbar to disappear but at 1:41:45 the "margin-top" only move the video instead of the navbar?

    • @fireonyxiaz
      @fireonyxiaz 2 ปีที่แล้ว

      edit: the actual reason is cause of the Hero component, because it is under the navbar the negative margin top affects it (hero) instead of the navbar.
      It's just how negative margins are, very confusing.

  • @LasgCe
    @LasgCe 4 ปีที่แล้ว +1

    So .. I spent several hours watching your videos .. and well, I learned so much, thanks for taking the time and creating such long and informative videos

  • @rishabhgupta5974
    @rishabhgupta5974 2 ปีที่แล้ว +3

    2:08:42 add .default in the end otherwise picture will not be shown in current version of js
    require(.../svg).default

  • @christianfonseca5595
    @christianfonseca5595 4 ปีที่แล้ว +2

    I just want to say, you probably have the best tutorials Ive found! Thank you for the help!

    • @briandesign
      @briandesign  4 ปีที่แล้ว

      Glad you like them! Thanks Christian!

  • @yudhiesh1997
    @yudhiesh1997 4 ปีที่แล้ว +3

    Amazing website appreciate the work you put in to this video.

  • @ken75319
    @ken75319 2 ปีที่แล้ว +1

    Thanks giving me some ideas of css styling, though I think the main concept of real styled-component is making it globally and sharing it, because styled-component could use multiple times and do nesting. Just watched halfway and felt like I am writing normal css. But thanks again, your work is well-design and full of nice ideas.

  • @theskipper9156
    @theskipper9156 4 ปีที่แล้ว +27

    You have solved my portfolio project issues xD

  • @ranggaputrapertama705
    @ranggaputrapertama705 4 ปีที่แล้ว +1

    Thank you Brian you made my beginner step to website design become a lottt easier

  • @cameronarnold9214
    @cameronarnold9214 2 ปีที่แล้ว +12

    If you're having any issues with margins, instead of removing the App.css file, delete everything inside and replace it with *{margin: 0px; padding: 0px}. This will remove all default margins, and give you more freedom to work.

    • @darrienhuntley4473
      @darrienhuntley4473 2 ปีที่แล้ว

      not sure why not its not working, nothing in *{} is taking - please help

  • @fatma7368
    @fatma7368 ปีที่แล้ว

    Brian you must raise up! thank you so much It's really helpful

  • @dreykim
    @dreykim 3 ปีที่แล้ว +3

    If I could give more than one thumbs up, I would !
    Amazing work.

  • @salahhatem4601
    @salahhatem4601 3 ปีที่แล้ว

    So Underrated it's insane
    Thanks man you deserve much more keep it up

  • @ratul1125
    @ratul1125 3 ปีที่แล้ว +9

    Brilliant react project. Has a high level

  • @bharatsinghrajawat7922
    @bharatsinghrajawat7922 4 ปีที่แล้ว

    I watched 4 minute of video and can't stop to comment dude this is what we need tnx for video and keep it up . Now i can continue to video ...

  • @earthycoin
    @earthycoin 4 ปีที่แล้ว +10

    Brian coming up don't sleep. Love this man!

    • @briandesign
      @briandesign  4 ปีที่แล้ว +1

      Yessir! Learning everyday

  • @songsonggaming814
    @songsonggaming814 2 ปีที่แล้ว +1

    Thansk for the tutorial, im learn alot about styled component in this video.. keep it up sir!!!!

  • @TomaszOstroga
    @TomaszOstroga 2 ปีที่แล้ว +5

    Hi Brian, your tutorials and design is awesome! Have one question, when you change navbar color with the addEventListener on scroll, shouldnt there be a cleanup function with that listener? And hows performance of that if you trigger that function on scroll? Any option for debounce? Thanks!

  • @codefoxx
    @codefoxx 3 ปีที่แล้ว

    What's the difference between building this using react vs just doing this with plain HTML, CSS, and Javascript?

    • @briandesign
      @briandesign  3 ปีที่แล้ว

      reusability and less code

  • @TheNamesJT
    @TheNamesJT 3 ปีที่แล้ว +5

    Its hard to visualize your styled components since he is teaching to create them first so its hard to understand what exactly the css is doing without being familiar with css and knowing things off by experience. Also, when he uses state inside the styled component and then adds said state as a prop then making the value the state is confusing as hell. Example in the navbar index.js file you see we have state which is scrollNav and we made a prop named scrollNav which value is the state this is confusing because thought you had to destructure in the component parentheses to make props? or add "props" inside the parentheses and do props.scrollNav or something. So, the function changeNav is being called each time a scroll event happens which then updates the state based on if the scroll is greater or equal to 80. I just don't understand the scrollNav prop and how he defined it without de-structuring or adding props to the parenthesis.

  • @nestor-martinez
    @nestor-martinez 2 ปีที่แล้ว

    Brian, you're an inspiration. Thank you for putting out this awesome content; sat here all morning learning all this new stuff. Subbed!

  • @유병국-g4t
    @유병국-g4t 4 ปีที่แล้ว +2

    i'm learning in Korea. I hope you continue to make tutorial like this.

  • @sofianekhalef
    @sofianekhalef 4 ปีที่แล้ว +4

    Hey thanks for the video but i have this issue:
    img:require('../../images/svg-2.svg'),
    not working
    please some help

    • @briandesign
      @briandesign  4 ปีที่แล้ว +3

      you could try adding the images to your public folder then just use
      img: './images/svg-2.svg',
      let me know if that works

    • @sofianekhalef
      @sofianekhalef 4 ปีที่แล้ว +1

      @@briandesign Perfectly worked thanks but one question why it didn't works with require method?

    • @luismeza6015
      @luismeza6015 4 ปีที่แล้ว +1

      @@briandesign ty Mr! u inspire me!

    • @dannyinformal
      @dannyinformal 3 ปีที่แล้ว

      @@briandesign no idea why, but this doesnt work

  • @caseyslastgram1733
    @caseyslastgram1733 3 ปีที่แล้ว +1

    Thanks for all you do man, I appreciate you walking through your errors makes it feel more authentic.

  • @christiandinata296
    @christiandinata296 3 ปีที่แล้ว +7

    What an amazing tutorial with neat explanations along the almost 4 hours there :)
    I was wondering if you could create a reactstrap website tutorial ?
    Appreciate it man!

    • @briandesign
      @briandesign  3 ปีที่แล้ว +5

      I'll check it out! thanks

    • @christiandinata296
      @christiandinata296 3 ปีที่แล้ว +1

      @@jegandranbalakrishnan6336 Hi there, yeah easy to follow and sure the same output. Is there any problem I could help?

    • @clashwithguts18
      @clashwithguts18 8 หลายเดือนก่อน

      bro provide the source code i need it urgently..send the github link

  • @abdallahalhissy1971
    @abdallahalhissy1971 3 ปีที่แล้ว

    really thank you Brian for helping us to be professional, my words aren't enough to thank you. Besides, I just finished creating this project step by step with you. Break a leg friend:)

  • @ThrillerNotLive
    @ThrillerNotLive 3 ปีที่แล้ว +4

    If your CSS is not being formatted in your Elements.JS files, install the plugin "vscode-styled-components"

    • @achrafmineral2251
      @achrafmineral2251 3 ปีที่แล้ว

      I got an error it's not registerd !!!

    • @picko.materinic
      @picko.materinic 3 ปีที่แล้ว

      thank you my lord savior

    • @riz3463
      @riz3463 3 ปีที่แล้ว

      thank u so much bud

  • @aleximre3110
    @aleximre3110 2 ปีที่แล้ว

    This is a fantastic video, I'm using the template to build a website for my friend's small business!

  • @ananthu5203
    @ananthu5203 3 ปีที่แล้ว +3

    svg not displaying from data js. showing this [object Module] content in src

    • @BankoleTomiVisuals
      @BankoleTomiVisuals 3 ปีที่แล้ว

      I'm experiencing the same issue.

    • @damjankar
      @damjankar 3 ปีที่แล้ว +1

      Just move the folder images in to public and then in data.js write this: img: '../../images/svg-1.svg' p.s.- DON'T USE REQUIRE!!!

    • @krababTurkey
      @krababTurkey 3 ปีที่แล้ว

      You should import svg files.

    • @soniyatirvir9176
      @soniyatirvir9176 3 ปีที่แล้ว +1

      @@damjankar Thanks yo

    • @damjankar
      @damjankar 3 ปีที่แล้ว

      @@soniyatirvir9176 you’re welcome :)

  • @noname89636
    @noname89636 3 ปีที่แล้ว +1

    This video solved a lot of problems for me in my fullstack developer journey. Great video!

  • @Yr7tha
    @Yr7tha 4 ปีที่แล้ว +13

    Love your content bro. Can you teach how to add carousels in react? Automatic image sliders with its transition animations for the banner.
    Thanks for these awesome vidoes 👍

    • @Nathan-pu9um
      @Nathan-pu9um 4 ปีที่แล้ว

      yea man! a sldieshow react one would be great, ive managed to do it before but took the real long gravelly road to get there

    • @Imraann0
      @Imraann0 3 ปีที่แล้ว +1

      Dude there's tones of good packages out there

  • @Tech2etc
    @Tech2etc 4 ปีที่แล้ว

    Where can i find those images?

    • @briandesign
      @briandesign  4 ปีที่แล้ว

      check out undraw

    • @Tech2etc
      @Tech2etc 4 ปีที่แล้ว

      @@briandesign & the background video?

  • @Nathan-pu9um
    @Nathan-pu9um 4 ปีที่แล้ว +32

    if anyone having an issue with images, put the folder into public instead then in data: img: '/images/svg-1.svg'

    • @lifen8728
      @lifen8728 4 ปีที่แล้ว

      thanks a lot

    • @ricardoquirino3515
      @ricardoquirino3515 3 ปีที่แล้ว

      i am struggling with images, i tried to put image into folder public, but it's not worked for me. any Tip?

    • @Nathan-pu9um
      @Nathan-pu9um 3 ปีที่แล้ว

      @@ricardoquirino3515 make an images folder in public and put them in there

    • @ricardoquirino3515
      @ricardoquirino3515 3 ปีที่แล้ว

      @@Nathan-pu9um Thanks Nathan for help me, but it's not worked for me. i did it but i don't know why doens't work.

    • @thamsanqaj7137
      @thamsanqaj7137 3 ปีที่แล้ว +1

      @@Nathan-pu9um how are you... iam getting this error Module not found: You attempted to import /images/7335.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

  • @ioannisme7495
    @ioannisme7495 3 ปีที่แล้ว

    i am knew in react so i don't know yet if your tutorial is good...but i have to say that your UI skills are top!! very beautiful web site!

  • @Theguywhoneverlived
    @Theguywhoneverlived 3 ปีที่แล้ว +10

    Had to type img: require('../../images/svg-1.svg').default, to get the img working. at about 2:17:00

    • @marlonrtt
      @marlonrtt 3 ปีที่แล้ว +1

      I imported the svg's in the top of the file as "import svg from "../../images/svg.svg". Also works.

    • @atharvaathalye
      @atharvaathalye 3 ปีที่แล้ว

      its still not working for me

    • @LiquidMasti
      @LiquidMasti 3 ปีที่แล้ว

      @@atharvaathalye it worked or not because I found the solution

    • @elvisstuffman9083
      @elvisstuffman9083 3 ปีที่แล้ว

      @@LiquidMasti whats the solution

    • @LiquidMasti
      @LiquidMasti 3 ปีที่แล้ว

      @@elvisstuffman9083 just store location path of image in veriable and call it from props. If you still didn't get it let me know I will give you coding example 🙂

  • @MegaTommy105
    @MegaTommy105 ปีที่แล้ว

    Goddammit Brian. I hate front-end work but you're making me start to like it :)

  • @josuearreola9998
    @josuearreola9998 4 ปีที่แล้ว +4

    Is there a way to donate? I just learned a lot and this deserves something, it's just amazing, thank you so much!

    • @briandesign
      @briandesign  4 ปีที่แล้ว +3

      Thanks Josue! you don't have to do that, but I do have the source code in the description that you could purchase if you wanted to support

  • @joeloftus6148
    @joeloftus6148 3 ปีที่แล้ว +2

    This is pretty much a great build. You pretty much covered a lot of stuff. You should pretty much keep making stuff like this! ;)

  • @abishek1997
    @abishek1997 3 ปีที่แล้ว +3

    Please do a personal-portfolio using React

  • @antattackBAM
    @antattackBAM 2 ปีที่แล้ว +2

    If you are using es6, the syntax has been updated from 'Switch' to 'Routes' and 'component' updated to 'element'. Instead of doing 'component={Component}', you now need to do 'element={}.

    • @ashimshrestha4004
      @ashimshrestha4004 2 ปีที่แล้ว

      Thanks bro. Was stuck at that point. Really appreciate the help.

  • @coding_den
    @coding_den 4 ปีที่แล้ว

    You are literally the best programming channel on youtube.

  • @Ruyjerko
    @Ruyjerko 2 ปีที่แล้ว

    Awesome tutorial! I think if you add to this video or make a part 2 with Firebase for the user login, I'm sure you will become #1 in TH-cam searches!. We all would love and learn a lot to see that

  • @rahimabdul9607
    @rahimabdul9607 ปีที่แล้ว

    2:49:58 , I found it on stack overflow. Switch has now changed to Routes if you are using the latest version and also for needs to be changed to element={}, same thing for the signin page

    • @briandesign
      @briandesign  ปีที่แล้ว

      I made two new react navbar videos using the latest update too if you wanted to see it in a separate video

  • @OsundareToheeb
    @OsundareToheeb 2 ปีที่แล้ว

    I have not even watched this, but I know it's gonna be lit! I have subscribed too

  • @chaoticcitrus
    @chaoticcitrus ปีที่แล้ว

    for anyone who would like to see the immediate effects of CSS as he types out, after writing out the tags, for ex:
    , write export const NavLogo = styled`` (just empty) and then import it in your index.js, then save. This way, as you type and save, you will see what he's doing

    • @chaoticcitrus
      @chaoticcitrus ปีที่แล้ว

      write export const NavLogo = styled`` (just empty) in the NavbarElements

  • @asherintech
    @asherintech 4 ปีที่แล้ว +1

    This is so dope man, watched a few of your vids now and happily subbed! Your account's gonna blow up soon for sure, keep it up my friend.

  • @stillready6405
    @stillready6405 3 ปีที่แล้ว

    Just out of curiosity. As far I know it isn't good practise to have duplicate links on a site, such as a "second" mobile menu. My approach would be to transform the already established menu for "desktop" and change it based on media queries for mobile devices. On the other hand SEO and React aren't probably the biggest concern when building an app.
    But that beeing said, I really liked the tutorial! The website looks amazing and the teaching is really good, further the time stamps are really neat!

  • @dineshkumargiri1659
    @dineshkumargiri1659 4 ปีที่แล้ว +2

    Wow....this design is very attractive

  • @gdlmsn
    @gdlmsn 3 ปีที่แล้ว +1

    Great video tutorial! Seriously the effort you've put in creating this content is second to none! Great Job mate!

    • @briandesign
      @briandesign  3 ปีที่แล้ว

      Thanks Giulio! you can search undraw . co for those svgs

  • @talk2karima
    @talk2karima 3 ปีที่แล้ว

    this is the best youtube react tutorial. Please keep it up..

  • @dineshpatil5571
    @dineshpatil5571 3 ปีที่แล้ว

    @Brian, you rock man! I was looking for something like this for a long time. You made my day. I totally loved to write code with you! keep up the great work. God bless.

  • @snkamleshvishnoi9328
    @snkamleshvishnoi9328 2 ปีที่แล้ว

    great, now i have ms office activated, superb tutorial!!!

  • @johnconnor9787
    @johnconnor9787 2 ปีที่แล้ว

    Great example styled components usefullness. Thank you, before that I just thought that it only adds complexity, and why not just to use plain css, or css modules

  • @pavanrameshghate5416
    @pavanrameshghate5416 3 ปีที่แล้ว

    thanks brian you helped me with my final year project

  • @drewkwabs
    @drewkwabs 4 ปีที่แล้ว +2

    Amazing React tutorials. I love them. They're very easy to understand. Thank you.

  • @matej1228
    @matej1228 4 ปีที่แล้ว +1

    Really amazing work man, I recently created my first mern project to show employers and next was thinking about making portfolio page, this video is inspiring, might create something similar, looking forward to see how you solved some parts! Cheers

  • @praveenpandey1094
    @praveenpandey1094 3 ปีที่แล้ว

    Your work is really appreciable, Best wishes for your future, Brian :)

  • @johnherrera5913
    @johnherrera5913 3 ปีที่แล้ว

    Master! Absolutely brilliant tutorial, well done!

  • @masadamsahid
    @masadamsahid 3 ปีที่แล้ว +2

    3:08:40
    The one of the alternative ways to insert the copyright logo in an html element is using © .
    Hope this may help you, guys.
    Btw, it's a very helpful tutorial, Brian. It's very helping me to understand and practice how to use styled components.
    I'm waiting for your next works and tutorials. 😀👍

  • @TuanNguyen-ls6hm
    @TuanNguyen-ls6hm 3 ปีที่แล้ว

    Nice tutorial video, thank you so much. I'm looking forward to seeing more videos on your channel.

  • @davifreire833
    @davifreire833 3 ปีที่แล้ว

    I am using your videos to upgrade my projects. Thank you.

  • @aimananderil
    @aimananderil 3 ปีที่แล้ว

    What a underrated channel!

  • @jitxhere
    @jitxhere 3 ปีที่แล้ว

    Thank you for igniting interest in me for Development. I am trying my best to learn and make cool stuff...❤️
    Thanks for the tutorial.