HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

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

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

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

    Get the source code here: www.codavilla.com/posts/html-css-and-javascript-website-design
    UPDATED NEW Website Tutorial: th-cam.com/video/yZnmEwzHfZw/w-d-xo.html
    Favorite Resource for learning Front End Development: v2.scrimba.com/?via=briandesign

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

      Learning from your amazing content in view of building my own site soonest. Your such a great teacher

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

      @@ghislainleonel7291 awesome!

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

      @@mohammadadambinyahya6106 it's on my link above

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

      @@mohammadadambinyahya6106 it's in the blog post

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

      @@briandesign Thank you bro, i'm really appreciate it 🙏🏻❤️

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

    took me over eight hours to watch an one and a half hour video

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

      *a one

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

      Please provide the code bro

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

      Lmao

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

      @@ethanvega9403that’s how you gotta do it!!!!! Let’s go!!!

    • @Cap2879
      @Cap2879 9 หลายเดือนก่อน +1

      @@udaykiran5399 lmao the code is already there its in the comments pinned

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

    For anyone who has cold feet about this tutorial, it is PERFECT! It's actually taught me more than some of the other beginner tutorials I've watched in the past!

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

      Thanks! appreciate it

    • @raisalengko9056
      @raisalengko9056 4 หลายเดือนก่อน +2

      btw my menu symbol didn't form x but z , anyone know this why ?

    • @StenchFinger-e7j
      @StenchFinger-e7j หลายเดือนก่อน

      Its not perfect, At the 4 minute marker dude said "lets just test our css is working". And then he doesnt bother elaborating on why it doesnt work if it doesnt work. Ive done literally everything this guy has told me to do and for some reason CSS is not running in my html file.

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

      @@StenchFinger-e7j you sure you have the link with the correct href? cause his code is working. double check on that. also, what does chatgpt say?

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

    Watching a hand on tutorial helps much more. Watching this has given me a much more simplified teaching than most 10 hour "tutorials". Thank you so much for this!

  • @MM3OG
    @MM3OG 11 หลายเดือนก่อน +20

    Dude this is way better than watching my udemy videos that drag so long it gets boring. I like how you just basically do everything and explain a little bit as you go. Of course i know some basics not everything but this makes so much more sense when i see you performing it all together instead of in sections to create a real functioning website.

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

    Please do more of these videos where you only use HTML CSS and JS. They're so great for beginners like me

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

    Nice tutorial, but I think it is better that you also mention what the codes do. Like just a general definition of it so we can understand what each code do.

    • @VV4fflew4ffle
      @VV4fflew4ffle 2 หลายเดือนก่อน

      Doing this now and chatgpt helps me so much to understand more indepth when i ask it

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

    Hey man, your tutorials are one of the better ones on here. Many people fail to actually explain what everything does, they just tell us what they're typing which is annoying. But you do tend to tell us what stuff does sometimes, it would be great if you did that more!

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

      Yah, not a tutorial imo, mostly he's just doing a walkthrough of how to make that specific site. Seriously, I'd be happy if this was just an ad for the actual tutorial where he explains everything - would be willing to pay for that for sure. But as it is, this is only helpful for intermediate users I think, which I am not. lol.

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

      please provide the code

    • @jasonweng3009
      @jasonweng3009 2 หลายเดือนก่อน

      This...I did notice while coding along there's some unnecessary lines of css that don't really do anything.

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

    So I decided to learn to code websites and this was the first tutorial I watched. You have no idea how good it feels to have a little website this beautiful after a few hours with literally no experience at all! You sir are amazing!! Thank you so much! :))

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

      Is it really possible to this in one day??

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

      @@charmedla4941 The guy does it on video in under an hour and a half. If you know the very basics and can type quickly, you can follow along without really even needing to pause the video

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

      @@charmedla4941 yuh, im new! this is perfect! all though i broke some things after tweaking. i already had access to servers, but i'd recommened buying (if you wanna make yourself a website) a domain and a secure host!

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

    Beginner here and this is better than the UCF Coding Bootcamp I had to pay $1k for until I realized everything is on TH-cam! Keep it up and thank you!

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

    I watched the whole video , every single second of it , and I must say, you my friend just taught me more things in hour and a half, than my teacher could in 2 years.

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

    Great video as usual!
    A little side note for navbar__container in media - you only need padding 0 as it inherits all the rest by default... just to make the code a bit shorter, hope this makes sense ;)

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

      ah true! good catch

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

      please provide the code

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

      its in the video description@@udaykiran5399 .

    • @ThomasJackPotter
      @ThomasJackPotter 4 หลายเดือนก่อน

      @@udaykiran5399 its in the description/ comment section

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

    Thanks so much, this tutorial is good for people who went out of tutorial hell just now... things are much more clearer now, and not all over the place

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

    I am having a slight problem at 28:30 - I have written the code exactly and checked the whole styles.css for errors but there are none. But i can't get the drop menu bar to appear? Am i missing an extension or? Thanks

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

      I have the same issue as you do

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

      @@andreivacarus9532 same here

    • @trollkëbre
      @trollkëbre ปีที่แล้ว +3

      same here man.

    • @Muslim_Hashira
      @Muslim_Hashira 10 หลายเดือนก่อน

      did you ever figure this out??

    • @DynastyyTV
      @DynastyyTV 10 หลายเดือนก่อน

      @@Muslim_Hashira No :(

  • @MrJayoween
    @MrJayoween 9 หลายเดือนก่อน

    Whatching the boring basic tutorials and what you perform using those codes boosts my understanding ❤❤🎉

  • @OK-ns1dm
    @OK-ns1dm 3 ปีที่แล้ว +47

    Hey, nice tutorial ! I have been doing it from the beginning and I found it was easy to follow for a beginner. You also showed some basic html and css trick and it really helpful to me. Thanks !
    1:05:13 At this time, I think there should be also .services__card button:hover{ } part because it kinda feel weird as there is a button but seem unresponsive when hovered on it. Just a suggestion as a user 😅

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

    I just finished this
    3rd day
    Yayyy
    Your details are impressive
    Thank you for this.

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

    You are awesome! I love that you give clear explanations and open code resources. I tried to follow along other tutorials but they end up using other programs and don't provide any pictures from the app. Keep up the great work!!

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

    Learned how to build from this video and got some new skills. Thank you!

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

    Well done Brian! I'm learning and for me this is GOLD, i appreciate it mate.
    Thank you! wish you the best!

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

      Awesome, thank you!

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

    I have to say that this is hands down one of the best tutorials on TH-cam. Thanks for sharing.🔥🔥🔥

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

      could you please provide the code

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

    Subscribed bro! Literally spent 5 hours on this video because I was testing many things and learning instead of copy-pasting, now I feel free to sleep midnight but it was definitely worth it ! It would be better if you explain difficult/strange CSS things a little bit more! (Y)

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

      I feel this I’m 3h in and just got done the navbar

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

      @@brendenwardle6585 did you understand what bar&active&is-active is? I typed the same as he did on visual studio code and it refers to it as a class for somehow. I will be so greatful to you if you'll help man. I don't understand why it is not working

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

      Ditto, would love a video with more detailed explanations, step by step. Would totally be willing to pay for that too lol, an actual A to Z for building a website like this and what everything means

  • @مقتطفاتعلمية-م1ث
    @مقتطفاتعلمية-م1ث 4 วันที่ผ่านมา

    Thank you, your projects are wonderful. I implemented and created the project like this one, and I was very happy. Thank you for your help, my brother

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

    This guy deserves MILLIONS of subscribers!

  • @user-dq3qd3py6f
    @user-dq3qd3py6f 3 หลายเดือนก่อน

    Only the beginning is already better than most videos, thanks!

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

    I just learned some new things here. Actually it was too hard to code, it is for a little more experienced beginners than definitely new beginners but I enjoyed to code while watching. :)

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

    This video is truly amazing what you taught us here is months worth of learning tutorials. Thank you!

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

      Glad it was helpful!

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

    Suddenly, everything started to make sense!
    Thank you.

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

    🙌🌟 Website wizardry! This tutorial is a breath of fresh air in the coding world. Thanks, Brian Design! ✨

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

    I can't believe how could this video reach 71k views only!!!
    Keep up bro, as the others said you are the best out there and we all learn so much from you.
    I'm sure your channel will thrive soon.
    GOOD JOB 👌

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

    in 32:47 if you want to get the navbar toggle (the 3 line for the mobile version) make sure to check is written like this in the index.html

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

      Mine is all correct but it still does not show. I wonder why

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

      @@Shnookumsssss same here 😢

    • @Kiz-xe5kr
      @Kiz-xe5kr ปีที่แล้ว +1

      Thanks

    • @emmanuuell
      @emmanuuell 3 หลายเดือนก่อน

      goat 🐐

  • @SlashKilll
    @SlashKilll 2 หลายเดือนก่อน

    Thank you!! i am a little rusty with my html fundamentals so this will def help me refresh

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

    Such a great tutorial! One thing, it would be great if you could explain each part of the code a little more. EG, why are you making the Mobile Menu transform: translate (%5, 20%). Knowing some of the context would really help for beginners. Big thanks.

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

      Thanks Phil! If I’m correct you’re referring to the close icon? That’s just how I positioned it. There’s multiple ways to position that icon but that’s just one method I did. One tip whenever you see something that doesn’t make sense is to google the term and then after try changing the values to see what happens to the site. That’s what I did when I first saw that transform thing and didn’t know what it did

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

      @@briandesign Thanks for confirming! And you're totally right, Googling and playing around is the best way to learn. Keep going with the channel, your content is awesome and I see you having way more subscribers soon!

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

      @@philhooper1540 thanks Phil!

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

      @@philhooper1540 "Googling and playing around is the best way to learn" - I think you mean, "slowest way to learn", lol

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

    Im an on the fly learner so this was a perfect intro for me

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

    Thank god i found this channel last week.

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

    This was amazing. I learnt so much from this. Thankfully I had VSC all set up with the extensions etc. Thanks for this video mate! :)

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

    I'm having issues with my toggle bar apart from that this tutorial is flawless!!!!!

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

      yeah my burger menu isnt showing up either.

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

      I had a problem with the javascript-toggle-bar as well, then I tripple checked the Code and I had a spelling mistake. It's all perfect!

    • @TS-qf7ne
      @TS-qf7ne ปีที่แล้ว

      @@ClemensMMueller What was the spelling mistake?

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

    Is it just me or I found out that vs code can auto fill

  • @razasaqlain7873
    @razasaqlain7873 7 วันที่ผ่านมา

    I asked chatgpt to show me an amazing chanel where the person builds and explains each concept, and the first chanel I got is yours

    • @briandesign
      @briandesign  7 วันที่ผ่านมา

      that's awesome!

  • @Ab-cj6gl
    @Ab-cj6gl 3 ปีที่แล้ว +8

    shit i feel bad for people who haven't discoverd this hidden gem yet

  • @pericoripiaotours
    @pericoripiaotours 11 หลายเดือนก่อน +1

    There is interesting stuff taught here, I would like to learn all three HTML, CSS, and JAVA I have a tour company and have major issues with getting a proper website developed.

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

    Hi! Great content, love all the work you're doing. I was trying to follow along with your code here, but for some reason my mobile menu button isn't opening on click. When I comment out the "top" and "opacity" portions of the navbar__menu, I can see the menu open with the all the links just as your example showed. Any ideas as to why this might be happening?
    To note: I can hover on the mobile menu button but only on each of the 3 individual bars, it isn't really acting like a whole button.

    • @Akunnaya-Mercy
      @Akunnaya-Mercy ปีที่แล้ว +3

      I think I’m having this same issue as well

    • @zoned6016
      @zoned6016 10 หลายเดือนก่อน

      did you find a fix ... please help me if u did

    • @adwaita-pl
      @adwaita-pl หลายเดือนก่อน

      Same problem here

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

    The content is great but I think you should explain what exactly we are doing a little more!

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

    The navbar_toggle .bar doesn’t work for me at 28:28 i copies ur code from github and still no please help

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

      Yeah I'm having the same problem

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

      so its not just me lol, i thought i was going crazy. I read the code over and over. did anyone find a solution?

    • @FLUFFCHIRP
      @FLUFFCHIRP 11 หลายเดือนก่อน

      @@Shnookumsssss has no one found a solution yet

    • @Muslim_Hashira
      @Muslim_Hashira 10 หลายเดือนก่อน

      i need a solution :'(

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

      @@Muslim_Hashira make sure the previous mention of .navbar__toggle (has a space) before .bar

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

    So, this guy dosnt actually teach anything. But its a helpful video if ur willing to pause and go learn every concept he talks about as he approaches it. Seeing someones train of thought, and learning what it is you need to research can definitely help a lot of people

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

    Thank you mate for this video. Throughtout the tutorial I made lots of mistakes in multiple times specially in the css, however I decided to fix it by myself to make it to the end of the video and let me tell you it helped me a lot... cheers !

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

      Great to hear! thanks Juan

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

    Great tutorial. I'm catching back up with the rest of the world right now. Been working in print industry for too many years, but now i have a new job with web design opportunities.

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

    This is a good tutorial but I wouldnt exactly say its for beginners. For people that know nothing about html and css, I can easily see them getting lost watching this video.

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

      do u know any tutorials that are?

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

      @@Rahhhw9 If you are still looking for some, i know that freecodebootcamp has great tutorials

  • @arjumandbano6590
    @arjumandbano6590 2 หลายเดือนก่อน

    Cool one I used this as a dictation for coding. Quite cool experience. Thanks.

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

    I've entered all the CSS and HTML correctly. I dont seem to be able to see the nav bar toggle icon at 28:30 . I have absolutely no idea why and I've troubleshooted so many things. Any popular bugs with it or is it my end still?
    FIXED: Had two closing divs.

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

      i got the same issue but not fixed yet

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

      @@dilshanmalaka705 me too. I went over it bunch of times, not working.

    • @RamandeepSingh-yc8ss
      @RamandeepSingh-yc8ss 3 ปีที่แล้ว

      actually i also got same problem then i realized we are using CSS and he is using css5 thats why there are bunch of differences between these css and css5.

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

    It's really helpful, if you can show demo website same time you coding, and show what code mean, it will be perfect for new coders

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

    I'm trying to follow along with this code, but at the #navbar__logo part in styles.css, my website doesn't show the "NEXT" in ff8177. Instead, it's just completely black right there. The lines in particular that make it disappear are -webkit-background-clip: text; and -moz-background-clip: text; (Is typed at 14:49). Does anyone know why this is happening?

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

      that code not working pretty well have a lot of errors

  • @loganguzman6856
    @loganguzman6856 4 หลายเดือนก่อน

    Great video tutorial! he explains very well because he takes his time to teach vs other videos that are good but they go to fast and is hard for the beginners like me. Thank you!

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

    Great video!! It's so easy to follow along and really informative. Thank you. 🙏

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

    For some reason the transition for the bars did not work but fortunately Chat GPT helped me
    I changed "transition: all 0.3 ease-in-out;" -->> transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    and now its working perfectly.
    Who knows what the deal was i'm glad i fixed the bug

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

    OMG! Thank you so much, this tutorial is amazing, I use that to practice developing!
    Infinite thanks!!

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

      Thanks! appreciate it!

  • @ovidius9862
    @ovidius9862 19 วันที่ผ่านมา

    THank you for explaining everyhting you did , you are the best teacher, why don't you get a degree in teaching beceause you are better than my teacher, explaining everything so wellll!!.

    • @briandesign
      @briandesign  19 วันที่ผ่านมา

      thank you!

    • @ovidius9862
      @ovidius9862 19 วันที่ผ่านมา

      @@briandesign Didn't you get the joke?😂 You were just typing there this, that and didn't even explain a thing what those lines means, especially in css.

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

    Great video! I seem to have an issue where I'm testing the site on the live server and then when I upload it to my web server some parts of my CSS seem to not apply. Any idea why this might occur? For example, I have made the navbar links to max-content because the text was wrapping, and it works fine in testing on the live server, but when I upload the site to my domain the text is wrapped even though the code is exactly the same as the live server in testing. I'm confused.

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

      I'm getting the same issue, started when I added the "@media" section at around 21:00

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

    this is oneof the best videos you can find

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

    im just blindly following it without understanding whats going on

  • @farukmukhtar
    @farukmukhtar 11 หลายเดือนก่อน

    just what i have been looking for online for a very long time thank you so much its better than paying for a course to teach you this,when i can just subscribe to brian designs on youtube, keep doing the good work

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

    This helped me a lot thanks, but how would you make the navbar active at the specific slide? (great video btw)

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

    This is tge best way to teach
    Practically and it work well for me

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

    Decent tutorial, but not exactly targeted to total beginners who just finished HTML, CSS and JS courses. I understand this is like second language to you, but to us, we need many of the steps broken down/explained. You did stop to elaborate on some things, but overall skipped over the vast majority of the why's behind doing something. This is frustrating to us beginners because we're spending 1.5 hours of our time to learn the reason behind doing all of this and 80% or better is skipped right over. Sure, the video would be longer but it would be a much more thorough tutorial.
    This almost feels like watching someone solve a complex math equation, yet not learning enough from observing to be able to solve a similar equation on your own. Of course the majority of learning happens via trail and error. But, for absolute beginners who are overwhelmed, we want a thorough follow-along in order to see how it all connects together in practice. Since we can't remember everything from the courses we took, we really want to see the functionality and purpose of all the syntax used.

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

      I have the some problem unfortunately
      What you could do to improve it is to pause the video with every new line of code and then see on your editor what it does.
      Makes the whole thing more difficult and longer however

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

    PERFECT TUTORIAL.

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

    Good job, I've been learning a lot from your videos! Please keep posting these awesome tutorials!

  • @medymanno8646
    @medymanno8646 29 วันที่ผ่านมา +1

    WOW, 1h 25min long took 2weeks i think to finish it. All in all i enjoyed building this website

    • @briandesign
      @briandesign  29 วันที่ผ่านมา

      wow 2 weeks! thanks for watching! I have a new website design video I will share in the next few days

    • @medymanno8646
      @medymanno8646 28 วันที่ผ่านมา

      @@briandesign hopefully it has more JS in there do you have any JS websites design video that you made

  • @nonaabulashvili9789
    @nonaabulashvili9789 4 หลายเดือนก่อน +4

    Whos here in 2024🎉

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

    Thank you, I just finished it, and looks fab 😀!

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

    mobile menu not working

    • @alishavirani7182
      @alishavirani7182 3 หลายเดือนก่อน

      did u ever fix it i’m getting the same issue

  • @RubberDingBat
    @RubberDingBat 5 หลายเดือนก่อน

    I wouldn't say this is something to learn from as you're making it fast paced without much explanation, especially from a beginners point of view. It's awesome how easily you made this interactive/responsive page but for us newbies just copying what you're doing without actually knowing whats going on doesn't teach anything!

  • @Maria_farah
    @Maria_farah 2 หลายเดือนก่อน

    It was pretty fun following you all step by step

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

    Is this really beginner level coding? It seems quite complicated though does give something beautiful at the end of it. If it is beginner level, I have a LONG way to go.

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

    You sir are the man thank you for breaking it down Barney style.

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

    Thanks for the tutorial.
    Question, is it good practise to use more then one on the same page?

  • @DinejadNejad-l6l
    @DinejadNejad-l6l 11 วันที่ผ่านมา +1

    1:01:10 can anyone explain why the image appears when i type url('images/pic3.jpg'); and when i follow the code in this video with the "/" sign behind the word "images" the image doesn't appear

  • @sppamaccount4771
    @sppamaccount4771 9 หลายเดือนก่อน

    Excellent video, I learned a lot during this project!

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

    this tutorial really helped me with the @media property

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

    Yooooo. Dope tutorial. I'm legit learning a lot from you brother. Suggestion, and I don't know if you have already, but can you make a video breaking down this code{explain the attributes you use and maybe why you used them. What's considered good practices in webdev.. }. It would be a long one, I know, but I'm 1000% sure that thousands of us would benefit tremendously from a video like that. This video actually building the site, but then a separate video explaining everything. thanks again! love your content!

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

      thanks Luis! Well you can make this exact same site 1000 different ways, so I'd say just focus on understand the template and foundation, then after you can figure out what styles you want to use. I wouldn't focus so much on why i used display: flex instead of grid etc. because again 100 people could make this exact site with different code, yet it still looks the same.

  • @mouaadibnelaryf6848
    @mouaadibnelaryf6848 10 หลายเดือนก่อน

    Very straight forward and helpful thank you

  • @haroldhkleinhans8208
    @haroldhkleinhans8208 10 หลายเดือนก่อน

    This is a really great tutorial. easy to follow along for startups like myself. I struggling to get the toggle bar though, not sure where i made a mistake. but otherwise, having a blast learning on here.

  • @snapper1113
    @snapper1113 2 หลายเดือนก่อน

    53 minutes into the video I finally realized I can slow down the playback speed. I swear I had smoke coming from my keyboard trying to type so fast for those first 53 minutes.

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

    If you’re struggling to keep up, change playback speed to 0.75 and your good ;)

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

    Not many Channels make Cool website tutorials.

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

    perfect tutorial! many thanks!😘😘😘

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

      Thank you!

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

    Awesome! I enjoyed watching every bit of it. Wonderful job.

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

    This tutorial rocks! It cleared up alot of unkowns about website coding for me and it's all done in such a professional way!

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

    Bruhhhh, I spent a lot of time wondering why the mobile menu would go down, I realized I wrote documents instead of document on the js
    Cool tutorial.

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

      Same issue here, only noticed because of you aha. Nice one.

  • @fox-4047
    @fox-4047 ปีที่แล้ว

    The website seems to be cool at every single point. You've done everything without any step skipped. But there is something that was going wrong with me: I did literally all you've done but unfortunately the result was not the same. There was a couple errors in the in the front-end of the project. As a beginner I don't really know where to go to fix that errors.
    In general, thank you so much for the tutorial who relayed on the main staffs right in the field of website development.
    I recommend it.

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

      thanks! if you try inspecting the page you can check for any errors. Usually if it doesn't look the same it's because you mistyped something such as a ' or ` or ( ) etc. or misspelling class or =
      so I'd double check the code part that isn't working and see

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

    Thank you so much for getting me started!

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

    It's amazing video. Really awesome... Everthings works!!! I awalys enjoy your videos. Congrats!!!

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

    On those "cards": If you put the same transition on the :hover selector as well, they'll go back to normal in a smooth transition as well when you stop hovering, instead of snapping back jarringly. You prolly knew that already but thats something that always makes me go "eww" when I see it haha.

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

      yeah haha it's hard to notice at first unless you have like a 1s+ transition

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

      Wait where would i add that, which line?

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

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

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

    This is the way to teach this stuff! Can you do one about creating a Blockchain project?

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

    What kind of person gives a dislike to this type of video?

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

    Thank you so much - incredibly helpful!

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

      Thank you so much Becki! Glad it was helpful

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

    Brian Your videos are absolutely fantastic. Unlike most web designers on the web your videos are Very well explained. My Grid does not work however, cant seem to know whats wrong

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

    Thank you so mutch i learned alot from this video it took me 3days to understand most of the work but i finnaly got it.

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

      How do you make the line at 28:30 to work?

    • @FLUFFCHIRP
      @FLUFFCHIRP 11 หลายเดือนก่อน

      Did you find out?@@zyxha6491

  • @sullivan_english
    @sullivan_english 4 หลายเดือนก่อน

    This video helped me a lot! I It's really useful for beginners 💯💯

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

    I really appreciate the effort you put on this was far by the best tutorial ever i have come across.