How to Create Navbar in HTML and CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ม.ค. 2025

ความคิดเห็น • 138

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

    At first, it didn't work for me and then I realized I had missed some of the steps lol. It actually works, making my assignment nice. Good video

  • @Myrtis-o4s
    @Myrtis-o4s หลายเดือนก่อน +1

    I made it after 6 days of learning html css i just coded this without the tutorial (only by looking the image) im so proud of myself .

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

    Thanks for the clear and simple video. I learned few things Additionally. Keep rocking. ❤

  • @kindasurvivng
    @kindasurvivng 11 วันที่ผ่านมา

    Really helpful, does work and looks really good, thank you!

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

    Short Video, AWSOME Job !! Thanks

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

    I am learning a lot from your videos, thanks

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

      Keep going man!

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

    It was really good. Simple and clean. Thank you.

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

    شكرا Thank it was helpful💯💯

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

    Thanks!!! I've learned a lot from this video

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

    you are the best continue❤❤

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

    Finally he know He have a channel 😅btw very Gud ❤

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

      😅😅

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

    Thanks for sharing your knowledge! Very helpful and easy to understand.

  • @wahyuramadhanaz-zuhri1673
    @wahyuramadhanaz-zuhri1673 5 หลายเดือนก่อน

    Thanks, you got an instant like and subscribe for the straighforwars content!

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

    So simple, so awesome.

  • @tommypool-xd5np
    @tommypool-xd5np 9 หลายเดือนก่อน +5

    Can I ask about the first input on the .css stylesheet.
    I see a lot of people that start with * { and set the margin, padding to 0 and box sizing to border box. Why is this? Is there anywhere that explains this?
    (I am very new to this!)

    • @beko1603
      @beko1603 9 หลายเดือนก่อน +5

      The * selector targets all elements on the page. Setting margin and padding to 0 and box-sizing to border-box ensures consistent spacing and sizing, making styling more predictable across different browsers. It's a common practice for CSS resets or normalizations to establish a baseline for styling.

    • @tommypool-xd5np
      @tommypool-xd5np 8 หลายเดือนก่อน

      @@beko1603 Thank you very much for the explanation! :)

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

    Thank you for sharing this tutorial! It's nice looking and pretty straightforward. I was going to use Bootstrap but I may just code it myself with a little extra JS thrown in for small animation touches. Next need to find a way to link a navbar file to the homepage so I can make changes in just one place.

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

    Thanks my guy. Helping me land clients as a beginer

  • @AbdulHadi-pn8xo
    @AbdulHadi-pn8xo 3 หลายเดือนก่อน +1

    thanks worked on first try!

  • @mariaalejandracabrices2678
    @mariaalejandracabrices2678 18 วันที่ผ่านมา

    so good, thanks

  • @Auynim
    @Auynim 6 หลายเดือนก่อน +2

    hey so the visual code wont let me type "transition: .3s;" on the line 54 in stylecss
    edit: i try on ".navbar a:hover::before" and it worked

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

    THANKSS, this video is very nice

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

    Gooooood

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

    Thank you so Much i learn it

  • @mada-t6w
    @mada-t6w 3 หลายเดือนก่อน +1

    For some reason, the image wouldn't scale properly when it was 100vh but I changed it to 80vh and it now works... I'm thinking that this is maybe because of the device that I'm using? I'm not so sure as to why it did that

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

    Wow, thank you!!❤

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

    really good 🎉

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

    Great video, great tutorial. Thanks bro

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

    I love it bro😍😍

  • @1millionlabs
    @1millionlabs ปีที่แล้ว

    thanks codehal for this amazing tuotrial

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

    Thank You..
    🙏

  • @zelalemkebede-gg4ui
    @zelalemkebede-gg4ui 11 หลายเดือนก่อน

    Nice worj🎉❤❤❤

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

    Awesome 😍
    2nd from Bangladesh 💝

  • @tahalamkahkah-ok9ry
    @tahalamkahkah-ok9ry ปีที่แล้ว

    you are the best continue❤❤

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

    best tutorial ever thanks so mucj

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

    woow, thank you...this was a good practice project

  • @uartim
    @uartim 2 หลายเดือนก่อน +1

    It looks better to me to have align-items: center for the flexbox

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

    At 2:35, what part of the css file moves the items to the top right of the screen? I copied what you did but it stayed in the top left

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

      He used display:flex and justify-content: space-between
      Did you ensure that the logo and the nav bar are separate from each other?

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

      @@hafidz2698 How can they be separated?

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

    Just love it❤

  • @omarwalied-yr8yx
    @omarwalied-yr8yx ปีที่แล้ว +1

    I'm from Egypt ❤

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

    TQ. very helpful

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

    Good job

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

    Can the logo be moved further to the left? Amazing content❤

  • @SammerTime-o6e
    @SammerTime-o6e หลายเดือนก่อน

    🔥🔥🔥🔥🔥🔥🔥🔥🔥

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

    Just subscribed

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

    Good job, thanks

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

    wow simply wow

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

    Nice!!!

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

    hocam selamlar aynı sayfa içinde iki farklı yapı oluşturdum body etiketlerindeki çakışmayı nasıl önlerim (important ?)

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

    thanks a lot bro

  • @Nanashi-rq7lk
    @Nanashi-rq7lk ปีที่แล้ว

    Nice tutorial

  • @Victusu
    @Victusu 6 หลายเดือนก่อน +1

    which vs code theme is that

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

    Very nice

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

    thanx broo

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

    what does the * in the stylesheet refer to?

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

    very nice 6 min !!!

  • @AbdallahMaikano-np4jy
    @AbdallahMaikano-np4jy 7 หลายเดือนก่อน

    bro please where do you get those nice background pictures from

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

    nice video thx, btw what's the vs code theme ?

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

    thanks man

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

    thank you

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

    Hi there. Instead of words, how can we replace with a diagram? Like a "home logo" to make it nice looking

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

    good navbar bro
    wouldn't be easier to use a border or outline to the a's?

    • @Deepak-lx7zb
      @Deepak-lx7zb 11 หลายเดือนก่อน

      i thought the same haha

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

    (makes window smaller)
    "wait where are the other options"

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

    Which website are you use for pictures?

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

    Which theme are u using

  • @l.e.221
    @l.e.221 ปีที่แล้ว +2

    Fantastic video for me as a beginer. I followed your instructions an copied all the same way. Instead of your 5 links I made 12. In this case my links can't be seen all. There ist a lot of space between Logo and first links, but the last 2 links are outside the page. How can I solve the problem?

    • @l.e.221
      @l.e.221 ปีที่แล้ว +4

      I found the mistake. in the css I forgot the "*" in the first row. now it works.

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

    i did the same code but i cant get that little white line

  • @Snap-Tutorials
    @Snap-Tutorials ปีที่แล้ว

    great

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

    I dont know why but text disappear when I change back ground color

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

    can someone tell me why did he use z -index and why is the result same even after using it?

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

      It is used to blend the background image with the navbar...thats why you can spot the image at the back of the text in the navbar

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

    Hello, I have a question: how can I make the strip fly out on the other side?

  • @montalesmarktitusr.4930
    @montalesmarktitusr.4930 ปีที่แล้ว +19

    the background image is not showing

    • @Ana_.H
      @Ana_.H ปีที่แล้ว +6

      You have to put the image and project in the same file

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

      ​@@Ana_.H like how mine not showing too.
      They are in the same file

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

      ​​@@Thasmilingcoast Maybe your invoking it the wrong way.

    • @artwork-studios
      @artwork-studios 5 หลายเดือนก่อน

      ​@@Melissa0Vcould be or could be no browser support

  • @JoséAugustoR.Santos
    @JoséAugustoR.Santos 5 หลายเดือนก่อน

    can someone please explain to me what this part means exactly?
    .navbar a::before

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

    what to put instead of Logo to show my own logo ??

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

      i think you just put your image by using

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

      hi! did you figure out how to do it? i'm having the same problem

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

    my navagation bar text is aligned to the left

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

    For some reason when I use "space-between", it puts the elements at opposite ends of the page width.

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

      You might've forgotten to add 'box-sizing: border-box;' property to the * tag. At least, it was the reason in my case.

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

      @@aV5d9nlUBQ9 thanks for this! As soon as I’m at the computer I’ll double check and see if that fixes it!

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

    ada course nya ga bang

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

    can u make it with explaination??

  • @Abdelillah-27
    @Abdelillah-27 ปีที่แล้ว

    thank you so much bro

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

    Super

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

    Yo bro, that was so fucking good and easy to understand and that music made it so much interesting, I was vibing the whole tutorial 😂

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

    Can anyone please tell me what theme he is using ?

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

    First❤

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

      Hi, thanks ❤

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

    hey its all working but theres one problem i dont see the content i implemented into the page

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

    When I do the background thing it's it showing up I have it exactly like you have it, help?

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

    how do you add text below?

  • @CartVista-kb4mw
    @CartVista-kb4mw 10 หลายเดือนก่อน

    where do you get th image

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

    tnx

  • @Yousef-o8z
    @Yousef-o8z 3 หลายเดือนก่อน

    the navbar is moving when i scroll down i want it to stay

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

      Use position fixed

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

    How can I fix this when I use on mobile device? It doesn’t look right when i use a mobile device

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

    Love from India ❤sir please work hole this in mobile please because import URL didn't show in mobile app reaplit

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

    swag swag swag poggers pogg i love swag i love poggers

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

    this shit goes hard asf

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

    Bro make best logo in 6m than me on my 2 hours

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

    bro responsive kasa banana ka woh bhi batate

  • @Adidinamite
    @Adidinamite 10 หลายเดือนก่อน +1

    haha bro nice joke with the only

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

      lil nega wdym

  • @Osama-Abdelsalam
    @Osama-Abdelsalam ปีที่แล้ว

    Theme name?

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

    why in navbar a margin-left written why padding-left was not written

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

      Why padding?

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

    Sir what is the content? content: " "; ?

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

  • @TLOZ1986
    @TLOZ1986 10 หลายเดือนก่อน +1

    Its not responsive

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

      Did u add a link in the # place?