How to Build a Website #5 - Creating a Professional Navigation Bar #2 | Tabs [HTML & CSS Tutorial]

Подписаться 4,9 тыс.

Просмотров 64 тыс.

50% 1

In this tutorial, I will show you how to create a professional looking navigation bar for your website using HTML and CSS.
Subscribe to be notified as and when I upload new tutorials in the future. More tutorials coming soon!
/ joedracup
Show your support by giving this video a 'like' if you enjoyed it or found it useful in any way.
Share this video with anyone who you think would also benefit from this tutorial.
Leave any video suggestions in the comment section below. All suggestions are appreciated and will be considered for future tutorials.
Follow me on Instagram:
/ omg_itz_joe
Follow me on Twitter:
/ joedracup
Software that I use in my videos:
- Ezvid
- Sublime Text 2
- Adobe Photoshop
- Windows Magnifier

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@brucemoncrieff2362 7 лет назад

Found this Dec 2016. Absolutely superb, easy to follow, good subject tutorial - tks v m

@levonjacks 4 года назад

Too bad you stopped posting new vids. You just gave me a simple solution to my big problem in just two minutes. I was looking at how to change the active class with a click. Most of the tutorials whats me to use Jquery or some complicated java scrips. U made it easy with just CSS by assigning the same ID # to different links. Damn. Thanx.

@abelmaseko4040 4 года назад

loud and clear... thanks

@dishydez 2 года назад

Great content! Is there a way to add the functionality to create new tabs like you would a browser tab using css?

@The8PIT 7 лет назад

Dude, thank you so much! This was so helpful. You're awesome!

@robm8635 6 лет назад

could I recommend that you ramp up the volume on your video file and then re upload? my lap speakers are pretty lo-fidelity

@pvtdavidself7959 4 года назад

Okay so for some reason my links do not work and everything was checked and double checked for some reason only half the links work and the others give me the error page I'm so confused I did everything you said because anytime you typed anything I typed the same and for some reason my links won't do what they're supposed to if you can help me follow up with this it would be super helpful

@microhandsltd 4 года назад

Great tutorial, well presented and with a confident presenter. I couldn't get the id:"onlink" to work but not to worry. If someone had the same problem please comment.

@rajuasrajesh9003 2 года назад

Me too

@bannanegirl4267 3 года назад

@Joe Dracup , hi there first of all does this kind of programming you're using work for Notepad, also what if my menu idk tabs, whatever you call it that i created were made with the Ul, unlisted elements, so i'm new at programming(but only for creating websites), so how do I insert , I , is there a way to insert links to pages with the method i used , or do have to recreate my whole website draft *_*... ?, thank u.:), Edit: So with the unlisted elements, menu I've got I only have a homepage, and the rest once you click it, leads to no other links/pages, whatevs. the thingy.

@johnkennethpalomo9694 2 года назад

I need some help It says everytime i Click on each Bar it says your file cant be accesed

@spareme8533 8 лет назад

Mine is not working either. Border not showing properly had to put it in the . nav_bar ul li, the home button is smaller than the rest of the buttons. The webkit is not showing the correct radius.

@otakufam193 2 года назад

Thanks a lot bud!

@korekok4543 5 лет назад

I will try this, thank a lot sir more video to come🙌

@kevgits 5 лет назад

Very well explained. Thanks.

@kaderm3072 5 лет назад

thank you man that was very useful it helps a lot good video

@sophiaboni829 3 года назад

HOW DO I ADD INFORMATION WITHIN ON OF THE TABS LIKE WHEN YOU CLICK ON THE TAB PLEASE HELP

@maryjoydarilag7275 7 лет назад

Hi! Thanks for this tutorial. But why it didn't work on mine? I just followed you but my tabs are not switching to other tabs unless I open all the html file in chrome. Help me please :(

@tiefsoftwarelab 4 года назад

loved it

@aditya-wh7fh 4 года назад

Can u show how to make design a button in css with a functional link

@KellyChristian 6 лет назад

thanks for the tutorial. Appreciated it!!!

@JoeDracup 8 лет назад

If you need any personal help with your code, such as bug fixes or if your code isn't working as it should do, or perhaps if you would like a complete, professional website creating for you from scratch? Send me an email at joseph.dracup1997@gmail.com and I'd be more than happy to help out :).

@bbb4074 7 лет назад

thank you so much!! i learned many things !!!

@ShwibiTech 6 лет назад

Very good and helpful, thanks a lot!!!!!!!!!!!!!!!

@Henry_Nunez Год назад

Very good 🔔

@mintyplays4682 7 лет назад

Thanks! My website looks amazing! :D

@tavanue297 3 года назад

Thank u but my css changes not applying

@dancehalllyrics1303 7 лет назад

What does the code lines that start with "-webkit" do? I really can't figure it out. Great tutorial by the way! Keep up the good work, bro! You make so cool tutorials that are easy to understand and so easy to learn from.

@waasar 7 лет назад

Dancehall Lyrics Google 'css vendor prefixes'

@dancehalllyrics1303 7 лет назад

Aa, and that is/means?

@waasar 7 лет назад

Dancehall Lyrics You could read about it if you were to google it like I said, but in short vendor prefixes are used for new features that are partially supported by a particular browser. The -webkit-prefix means that it's an instruction for a non finalized feature in chrome. Other browsers use different prefixes, like -moz for firefox or -ms for IE and edge.

@dancehalllyrics1303 7 лет назад

Thanks for that great of an explanation, bro!

@waasar 7 лет назад

Dancehall Lyrics No problem

@Gumi_wuewuewue 6 лет назад

Id like to modify my navigation bar. How can i insert the logo of the website between the whole nav bar? Its like this [Home][About][Gallery](Logo of the website)[Shop][etc...] How can i do that?

@techieshu9553 6 лет назад

i would say use with your logo pic next to the other tabs

@swethasri8305 4 года назад

How to design each page in css??

@bestesevinc276 6 лет назад

Thank you !

@cmakga 3 года назад

thank you very much :D

@imboko2008 6 лет назад

Thank you.

@ritikjain3975 4 года назад

Thanks🙏🙇

@meh9150 6 лет назад

Nice vid bro

@jumamakorere8597 7 лет назад

thanks buddy!

@akywongster 4 года назад

I really need ur help with something, i want to centre the tabs into the centre with the 10px spacing between them as I only have 4 tabs, how do i do this ?

@halooshka1904 4 года назад

Try setting the width to 25%

@issieglore2447 5 лет назад

all working except the rectangular when you click the tab

@bannanegirl4267 3 года назад

Oh hahaha, ishh my bad I just noticed it was unlisted, afterwards I figured I played the video on mute (and reheard it with sound) this whole time, lol , sorry.. nvrmd ,