There are still lots of ways to further optimize this, here's two: - write shorter selectors, it's more efficient, easier to read and will reduce the risk of specificity wars. There is no need to write '.navigation ul li' or '.navigation ul li a .icon ion-con' when you can just write '.navigation li' and '.navigation ion-icon'. You can reduce that even further by using logical class names, typically in a BEM-like style so you could use .nav and .nav__item and .nav__link. This is a good habit to get in to. - use flexbox for vertical centering, support is excellent so no need for display fallbacks. You can get rid of the two spans inside the link and simply use align-items: center on the link. If you need extra fine control over alignment between icon and text simplest way is to use a transform on the icon. There is no need to use line-height on the text, that's an old trick and can look ugly if you ever need to support wrapping text.
Most of your projects are not responsive, please make them responsive sir. They are amazing but when we make them they looks good but we fail to make them responsive. Please make such amazing projects responsive as well
AOA! I have an idea for you. I want you to make a page on which there are some English alphabets of large size and what i want is that whenever you hover over some alphabets it displaces all those alphabets and the area under the cursor becomes empty and the letters are floating randomly. you are doing such a great job. your videos are really helpful and i am able to learn so much from you.
@@whatamiwitnessing1003 well, for educational purposes it kinda makes sense to only have localStorage since what you want to learn is the design and not the security itself
Hello, thank you for this tutorial. Can you help me to understand why did you put dispaly: block and display: flex for the same element please? 4:59min
Irshad sir aap ko koun koun sa language aata h please introduce yourself a separate video apni college aur abhi tk ki journey bataye i am excited to listen
Hi sir..i have a problem, i've followed this video step by step but when i modify '.navigation ul li a .icon' line-height, it put the icon at the top and the text at the center..how can i fix it?
i'm a amateur in web design... i developer my websites with Wordpress/elementor. I managed to copy this class in visual studio, but I couldn't import it to the site, and I also don't know how to place it aligned to one side of the page. could you help me with this?
Sir, can you help me, the problem is that in html I'm adding the video in video tag then I think so can one more thing have we added in this page. In video will have add a video preview gif, when we point cursor on the video so automatically Play video preview. and then after click Play button then play the original video. Sir PlZ help me can you make the video for this topic
Hey, I need help. I replaced the "#" in , and i added about.html and others etc.. And i copied the all the code and pasted in the about.html and others... then i saved the file and i went to the website and clicked on the about me icon and the animation didnt show and the paged directed me to the about.html without animation, what can i do to fix this and epic tutorial, pls pls pls help me or someone else who knows how to fix this by tomorrow and thanks. epic turotial also nice.
AOA! I have an idea for you. I want you to make a page on which there are some English alphabets of large size and what i want is that whenever you hover over some alphabets it displaces all those alphabets and the area under the cursor becomes empty and the letters are floating randomly. you are doing such a great job. your videos are really helpful and i am able to learn so much from you.
Trick 1 : ua-cam.com/video/P_A2kNpyQBs/v-deo.html
Hii can u please make it using tailwind
There are still lots of ways to further optimize this, here's two:
- write shorter selectors, it's more efficient, easier to read and will reduce the risk of specificity wars. There is no need to write '.navigation ul li' or '.navigation ul li a .icon ion-con' when you can just write '.navigation li' and '.navigation ion-icon'. You can reduce that even further by using logical class names, typically in a BEM-like style so you could use .nav and .nav__item and .nav__link. This is a good habit to get in to.
- use flexbox for vertical centering, support is excellent so no need for display fallbacks. You can get rid of the two spans inside the link and simply use align-items: center on the link. If you need extra fine control over alignment between icon and text simplest way is to use a transform on the icon. There is no need to use line-height on the text, that's an old trick and can look ugly if you ever need to support wrapping text.
iam in coding class learning basics css/js and we see your videos everybody: "whoaaaa c'est génial" (awesome in french)
C'est vrai que c'est tuto sont incroyable
Is It insane? Such a Beautiful Design only using HTML and CSS, No images👍👍👍❤️❤️
Yes, it is!
your the sort of person who would program their intros in css instead of using some templates online; you're very skilled, indeed.
The best channel for web development tips and tricks
500k Congratulation
Waiting for 1 million subscribers
Best Channel of India❤️❤️❤️
Your background music is completely awesome!!
so so great but can you change the music, it's make me sleepy :))
Congratulations 🎉👏 for 500k subscribers
Many many thanks
Can you build this website
??
If you do you are genuis
thanku so much for your this kind of help
Love from Pakistan sir❤️
Your channel help me alot
Thank you so much for give us such informational content
congo for 500k . keep it up
Thanks
Best code have i seen. Thanks for this video. Its very appreciable
yeah i was wondering why u not using after before in other video
Would this float over the page when opened or would it push age content across when the menu is opened? Cool menu though, very neat
❤️🇳🇵🇳🇵😃👌👌 congratulations for 500k sir
beautiful for ui designing
Thanks a lot
Most of your projects are not responsive, please make them responsive sir. They are amazing but when we make them they looks good but we fail to make them responsive. Please make such amazing projects responsive as well
AOA!
I have an idea for you.
I want you to make a page on which there are some English alphabets of large size and what i want is that whenever you hover over some alphabets it displaces all those alphabets and the area under the cursor becomes empty and the letters are floating randomly.
you are doing such a great job. your videos are really helpful and i am able to learn so much from you.
Hey, Everything works well besides the icons, I cannot see the icons and I do use the proper form.. Any advice?
Hello sir, can you make a registration and login form with localStorage only, it would be a great help if you do
Yes Irshad sir 🙌🙌 please make it with local storage JavaScript
Why would you want that to be local storage. So many security flaws its insane.
@@whatamiwitnessing1003 well, for educational purposes it kinda makes sense to only have localStorage
since what you want to learn is the design and not the security itself
@@tylercs8750 I don't see the relevance of your comment.
@@tylercs8750 Someone already said that tho, making your comment unneeded.
Hello, thank you for this tutorial. Can you help me to understand why did you put dispaly: block and display: flex for the same element please? 4:59min
This was amazing navbar.
Nice one!
Awesome tutorial
thanks brother This is amazing ❤
hi sir
I have a question
I wanna use it for mobile size.
is it possible??
Beautifull
Thank you for your great videos
Интересное решение, спасибо 👍
А как сделать чтобы в право выдвигалась выпадающее меню
На оставшуюся ширину экрана как сделать меню выпадающим
What is the topic you have in VSCode?
This is super good ⭐⭐ ⭐⭐⭐
Wow man ❤❤❤👌
Nice
Thanks
Amazing.
Thank you! Cheers!
you can make a menu bar like a video, but can that menu show more submenu . Thaks
please tell me best channal for learn
first 1 minute commend
Please Launch UA-cam Video series for Beginners in Website Developments from Scratch
Irshad sir aap ko koun koun sa language aata h please introduce yourself a separate video apni college aur abhi tk ki journey bataye i am excited to listen
Sir Can u add your own voice instead of Back ground music!
It will helped us a lot to understand some logics..
Please Sir
It can be that he don't have a good mic or don't want to do it and still it's his choice.
@@krishnachoubey8648 Or doesn't know the language well :/
Timestamp: 4:06
(ignore)
Fan request please clone TypeForm only front-end please 🙏🙏🙏🙏
Big fan 😢
it would be great if you could use a seperate .js file for the script
Sir, please add drop-down menu in it also, it will be great
Thanks
Why you put horror bg music? background-music: none;
great video but I dont like so many "magical value" it make the page vulnerable
Hi sir..i have a problem, i've followed this video step by step but when i modify '.navigation ul li a .icon' line-height, it put the icon at the top and the text at the center..how can i fix it?
i'm a amateur in web design... i developer my websites with Wordpress/elementor.
I managed to copy this class in visual studio, but I couldn't import it to the site, and I also don't know how to place it aligned to one side of the page.
could you help me with this?
thanks :0
First here
What do I do if I want the letter and the bar to change color when I select it?
sir, may I ask you for this awesome background music's name?
Sir it is awesome but can you make the transition smooth?
Ease-out Should be settled
@@jass__0 Ease-in Works better in this case I think
how to make curves for horizontal nav tabs
is it possible to add a fluid transition on click.? i mean when we click active fills with the color and previous active goes out of color to normal
Yes
Sir, if I want to be a front end developer with your channel, where do I start?
web developer : its impossible
muhammad : are you serious
Sir, can you help me, the problem is that in html I'm adding the video in video tag then I think so can one more thing have we added in this page. In video will have add a video preview gif, when we point cursor on the video so automatically Play video preview. and then after click Play button then play the original video. Sir PlZ help me can you make the video for this topic
i cant find the link for telegram group?
The sublink?
brother can i have the url for the google fonts pls
will you claim copycat claim If i use this theme in my project and publish it.
You know that soon I will tell in my video how to make a super portfolio website. I would love to tell you when it's made
Hey, I need help. I replaced the "#" in , and i added about.html and others etc.. And i copied the all the code and pasted in the about.html and others... then i saved the file and i went to the website and clicked on the about me icon and the animation didnt show and the paged directed me to the about.html without animation, what can i do to fix this and epic tutorial, pls pls pls help me or someone else who knows how to fix this by tomorrow and thanks. epic turotial also nice.
Sir when we code last javascript code it's not working can u pls explain
why the last script wont work for me
I didnt understand what happened when you did overflow-x:hidden 7:42
Please add sub menu in it
Sir , Can you teach php? ❤️
No...only Frontend
Pllease worpress totris
why that so many "Position relatives" if someone can explain
Hey sir, can you change your music.. It feel so sad :(((
Create a shopping website and give full code for free.
What u gonna do with that lol
Nice render but bad way to do it !
Its not even animating switch items, what a lame
If you started animating one part, why did you left another?
Great coding ugly music. 😂
AOA!
I have an idea for you.
I want you to make a page on which there are some English alphabets of large size and what i want is that whenever you hover over some alphabets it displaces all those alphabets and the area under the cursor becomes empty and the letters are floating randomly.
you are doing such a great job. your videos are really helpful and i am able to learn so much from you.
nice
Thanks
Nice