These are some of the books that can help you learn web designing - 1. Web Design with HTML, CSS, JavaScript and jQuery Set - amzn.to/2T3WViK 2. HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery) 2ED. - amzn.to/2DtVBAo 3. JavaScript and JQuery: Interactive Front-End Web Development - amzn.to/2R78ofJ 4. Web Animation using JavaScript: Develop & Design (Develop and Design) - amzn.to/2AZ3vQF 5. Mastering SVG: Ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript - amzn.to/2S1dj6p
The first video I saw in your channel and I really like it nice intro , coding is clean music is just my type I like it and your desigining is amazing. subbed and like
Let me propose a few improvements: prepare the markup before so that you can start with the sticky navbar. Additionally you could explain how to make a navbar sticky without using position:fixed from the beginning (because you don't have the navbar at the top all the time). You have to determine the current scroll height, how to switch navbar styles and so on. Also responsive aspects should be considered: what if your navbar will have other styles in small viewports and your approach to "stickyness" will change these styles? It may be a "basic idea", but heating water doesn't make you a cook either ...
Thank you for the cool nav bar and the learning from this video. I got stuck because I didn't add the jquery src to my html file but as soon as I popped that src code in it worked.
Josh Sturgess Hi buddy hope you are doing great. If you want to know or learn the complete website design from scratch then you can do checkout this bit.ly/2zKIvz0
Thank you for this awesome "sticky navbar" tutorial -- and providing the source code. I find all of your tutorials very thorough and helpful. One question for you. What VSCode extension are you using that shows the js tooltips explaining the js syntax?
what is difference between nav.black and nav .logo? beside in space? to be specific does nav.black select nav tag with class .black, and nav .logo - select class "logo" inside nav tag?
Hi Codegrid, I am unable to fetch the scrolling effect. I have followed the steps you showed but it is not working. I have already checked the jquery code inside the script tag and checked for syntax errors. Nothing found. Please help.
Anirban Dasgupta Just download the source code and try to run it! I have added cdn for jquery in head section. All you need is Internet connection. It'll work!
hey this video is great.thank you very very muck! I customized code a little bit and it turned out great ,, i just have one question: how did you style the scrollbar, i couldn't find that part in your code
"Log In" button will stuck at page if you minimize the width become too thin... i not sure is this situation just only happen to me or the code itself have problem
+氷咖啡 This is not responsive! So for Responsive navigation bar you can watch my new video (link in description) and download the source code from description!
Your text of the header is overlapping when u scrolling how to fixed it could u tell me ? When we scroll down the header div is to fixed/ sticky and could not overlap the text of the header to another div ?
Ya we define properties for class "black" in stylesheet. Though it is not mentioned in html file we can add certain classes to divs on certain events (e.g 'onclick', 'onscroll', etc.) using Jquery or Javascript!
I'm so new to this, I am meant to create a website page for my a level exam, I came across this video and it really is interesting. I'm not sure what jquery is, although I did download it. But can anyone tell me what the program codegrid is using?? PLEASE HELP ME OUT :( Real thanks!
Sticky bar is not working for me :( and also,when i use background:url(image.jpg) with the route of the image,once i scroll through the page and pass the image and then come back the image disappears and only a blank space is shown instead of the picture,what could it be? :/
Hello mate, i try download this tutorial but the download its ur first tutotrial not this one. Other question, can u create one responsive menu same this with out boostrap only css3 html5 icons and jquery? ty very much.
Hi can you please help me maybe. I have a different navigation bar and modified my html and css to add your jquery into it, but it doesn't change the nav bar's color. Please help!!!!!!
If you find your LOGO wont style and also doesn't center vertically to the other menu items, simply replace nav.logo with div.logo in your CSS and that should fix it!
Nice Tutorial and very nive NavBar! But i have a problem on Mobile Phones, when i go on the website and click on the 3 Lines for the navbar, there are only 5 Index Tab, but i have made 6. Could you help me? - sorry for my bad English, im german.
I am having close to the same issue. Whenever I scroll down, the text turns white and it moves in closer together a little bit. the exact opposite happens when I scroll up.
I tried replacing the image with a slideshow, but when i hovered the navbar the hover didn't appear I tried to change some positions but it didn't work can you help me :(
help me i can't see my image in section, how to solved this? section.sec1{ width: 100%; height: 100vh; background: url(background.jpg); background-size: cover; background-position: center; }
thank you sir for the codes.. but i have a problem.. i use your animated navigation bar and its okay.. but when i scroll down my web page. the text and image was seen through the black navigation bar please help me.. i want text and image was behind the black navigation bar.. thank you :)
Sai Chakradhar Gandla The black class is not used at the beginning, that's why you don't see it in the HTML. However, we use it in the script (jQuery) to automatically add the class to the header when the page is scrolled; therefore the browser needs to know what the black class is even without using it initially.
Join discord here: discord.com/invite/8jf6bkqSGF
These are some of the books that can help you learn web designing -
1. Web Design with HTML, CSS, JavaScript and jQuery Set - amzn.to/2T3WViK
2. HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery) 2ED. - amzn.to/2DtVBAo
3. JavaScript and JQuery: Interactive Front-End Web Development - amzn.to/2R78ofJ
4. Web Animation using JavaScript: Develop & Design (Develop and Design) - amzn.to/2AZ3vQF
5. Mastering SVG: Ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript - amzn.to/2S1dj6p
The first video I saw in your channel and I really like it nice intro , coding is clean music is just my type I like it and your desigining is amazing.
subbed
and
like
Let me propose a few improvements: prepare the markup before so that you can start with the sticky navbar. Additionally you could explain how to make a navbar sticky without using position:fixed from the beginning (because you don't have the navbar at the top all the time). You have to determine the current scroll height, how to switch navbar styles and so on. Also responsive aspects should be considered: what if your navbar will have other styles in small viewports and your approach to "stickyness" will change these styles? It may be a "basic idea", but heating water doesn't make you a cook either ...
Thank you for the cool nav bar and the learning from this video. I got stuck because I didn't add the jquery src to my html file but as soon as I popped that src code in it worked.
..or position:fixed for the
A big shout!! Many thanks for the coding
Hell of a video. Great job clean code!! BRILLIANT.. I just liked and subscribed, can't wait to learn more!!!
Thank you for this tutorial, very practical and I'm amazed by this interactivity between css and jquery.
watch 28 seconds of this video and God damn! I love it.
Learn a lot from your channel really thank u
THANK YOU ....you saved my assignment..
I have my code already but where would i insert the code for the sticky NavBar
Great video and nice and short for people with short attention span and cant watch a 3 hour vid cause they have so much to do like me
Thumbs Up bro! I'll use it for designing my Program
Man, you're amazing!! Thank you!!
Josh Sturgess Hi buddy hope you are doing great. If you want to know or learn the complete website design from scratch then you can do checkout this bit.ly/2zKIvz0
estan geniales los videos ..te apoyo! quiero ver más producciones!!!!
this is great man 😃😃
I like u r page ...asome very nice
Your designing is damn good dude!
You just saved my life
Source Code : www.dropbox.com/sh/2so52l4q74eu470/AABDHemSW_WsLUlBfPaLsNwsa?dl=0
Good pase, good music, good content. Subscribed
Thank you for this awesome "sticky navbar" tutorial -- and providing the source code. I find all of your tutorials very thorough and helpful. One question for you. What VSCode extension are you using that shows the js tooltips explaining the js syntax?
geatly inspired from your video !thank u so much !subscribed
what is difference between nav.black and nav .logo? beside in space? to be specific does nav.black select nav tag with class .black, and nav .logo - select class "logo" inside nav tag?
Yes
Nice lesson!
Wow awsome vidio! Thanks!
Hi Codegrid, I am unable to fetch the scrolling effect. I have followed the steps you showed but it is not working. I have already checked the jquery code inside the script tag and checked for syntax errors. Nothing found. Please help.
+Anirban Dasgupta You can get the source code from the link mentioned in description!
The concern still persists. The jquery script is not working. How to make it works? Please let me know.
I am new, but you can update it by downloading jquery again or changing the jquery code in html or css? to the recent update, which is 3.3.1 atm!
Anirban Dasgupta Just download the source code and try to run it! I have added cdn for jquery in head section. All you need is Internet connection. It'll work!
hey this video is great.thank you very very muck! I customized code a little bit and it turned out great ,, i just have one question: how did you style the scrollbar, i couldn't find that part in your code
Thanks ! Nice content awesome playlist
Thanks alot your tutorial helped me.
what is .black that you always add? I Dont get it.
Hello @Codegrid , please how i can add content to website? i mean how to create when i click on navbar "buy" show me content
For this you will have to link another html file with href of this navigation.
beautifully done
Hey do you prefer extensions on brakets?? If yes, what do you use?
By the way very clean html and css love your work
If I wanted to include the navbar in every page, would I need to copy paste this code? Or could I do it in the style sheet
What a nice work thank you
"Log In" button will stuck at page if you minimize the width become too thin... i not sure is this situation just only happen to me or the code itself have problem
+氷咖啡 This is not responsive! So for Responsive navigation bar you can watch my new video (link in description) and download the source code from description!
Thank You, This will help me a lot :)
Thanks. But I do not see of class named "black" in the file HTML and however you use in the file CSS.How it works?
Your text of the header is overlapping when u scrolling how to fixed it could u tell me ? When we scroll down the header div is to fixed/ sticky and could not overlap the text of the header to another div ?
any idea as to why my nav bar isn't turning black? i have looked over the code so many times and haven't found anything different to yours.??
Waoooo is wonderfull!
What's you use app program text?
May I ask you what's the name of the song on 7:40?I love your videos
WAW! this was amazing !
But can you show how to make menu works ? link it please. I dont know how make this.
Cool video
Thank you, awesome code!
'black' class is not mentioned in html file. How did it work??
Ya we define properties for class "black" in stylesheet. Though it is not mentioned in html file we can add certain classes to divs on certain events (e.g 'onclick', 'onscroll', etc.) using Jquery or Javascript!
In future please talk in the videos and explain why you're doing things. Thanks!
Source Code : www.dropbox.com/sh/2so52l4q74eu470/AABDHemSW_WsLUlBfPaLsNwsa?dl=0
what font did you have used??
How would you make it responsive to a phone or tablet?
+Jukke Boxx Link in description!
thanks codegrid
What is that text editor?
I'm so new to this, I am meant to create a website page for my a level exam, I came across this video and it really is interesting. I'm not sure what jquery is, although I did download it. But can anyone tell me what the program codegrid is using?? PLEASE HELP ME OUT :( Real thanks!
+Caossupremenk - csnk As I told before, I'm using 'Atom' Text Editor.
You can download it from the link given below :
atom.io
Is it visual code studio??
오우 멋져요 잘보고갑니다^^!!!
Sticky bar is not working for me :( and also,when i use background:url(image.jpg) with the route of the image,once i scroll through the page and pass the image and then come back the image disappears and only a blank space is shown instead of the picture,what could it be? :/
the link rel of css need to have location of folder
Thanks for information :D
Hello mate, i try download this tutorial but the download its ur first tutotrial not this one. Other question, can u create one responsive menu same this with out boostrap only css3 html5 icons and jquery? ty very much.
Can you please tell me that which software are you using for development of website
It’s brackets.
Hi can you please help me maybe. I have a different navigation bar and modified my html and css to add your jquery into it, but it doesn't change the nav bar's color. Please help!!!!!!
Thank you very much!
If you find your LOGO wont style and also doesn't center vertically to the other menu items, simply replace nav.logo with div.logo in your CSS and that should fix it!
What tools you can use to make that???pls share to us
Great video vlw
Спасибо за видео! Thank you!
Great content, thank you! Just wondering... where are you from?
Thanks, very helpful!... and what is the name of the background music..I like it
+Peter Kabiru Links in the description!
What is program were you code that?
Came for the tutorial, stayed for the music.
Nice Tutorial and very nive NavBar! But i have a problem on Mobile Phones, when i go on the website and click on the 3 Lines for the navbar, there are only 5 Index Tab, but i have made 6. Could you help me? - sorry for my bad English, im german.
Continue good
I can't get the last one, og doesn't get Black when i scroll my page. I just copy the code. Og does not work. Help pls
My Javascript file is not working...on sliding down , the background color is not changing into rgba....
Does it work on windows 7?
black class not loaded i just download the source code from the link and paste but still black class not loaded on scrolling just a white background
the last function of javascript ($) you use ,is not working ? in chrome
+afreen saleem Check out the source code. Link is in the description!
how or what do you call that thing below the navbar? the one on the whitebackground. thanks
Aya Zaiko Do you mean the text? It's called "Lorem Ipsum text"
this was really cool ty
Why use the float in the css?
and the class wrapper?
Hi. There is a problem when i scroll down my page the background color of navigation is just plain or without color black.
+Jeffrey Omadto You might not added Background-color property to "nav.black"!
Check your code whether it's exactly same ae mine or not.
here is my code sir .
nav.black {
background: rgba(0,0,0,0.8);
height: 100px;
padding: 10px 100px;
}
nav.black ul li a {
color: #fff;
}
I am having close to the same issue. Whenever I scroll down, the text turns white and it moves in closer together a little bit. the exact opposite happens when I scroll up.
I fixed the text turning white issue. however the moving in part is still there.
Hey!!! mention this url with script tag before your mentioned script tag in your html file, your problem will be solved :)
Is it device version ?
I tried replacing the image with a slideshow, but when i hovered the navbar the hover didn't appear
I tried to change some positions but it didn't work can you help me :(
Why i can't see red frame when i use this in Django... someting wrong with .js ?
Hi how can i put or use that Font (Quicksand)?
+Venedict Alcayde Copy this in your head section :
Aw thank you sir :)
Wow, very cool, it's a pity that there is no such content on the Russian-speaking TH-cam. I'm from Ukraine)
Keep it up!
amazing amazing amazing
Can I do this in WordPress?
help me i can't see my image in section, how to solved this?
section.sec1{
width: 100%;
height: 100vh;
background: url(background.jpg);
background-size: cover;
background-position: center;
}
Is the image in the same folder as the html and css files?
I'm having the same problem.
thank you sir for the codes.. but i have a problem.. i use your animated navigation bar and its okay.. but when i scroll down my web page. the text and image was seen through the black navigation bar please help me.. i want text and image was behind the black navigation bar.. thank you :)
PLEASE tell me what is .black used in css
Sai Chakradhar Gandla The black class is not used at the beginning, that's why you don't see it in the HTML. However, we use it in the script (jQuery) to automatically add the class to the header when the page is scrolled; therefore the browser needs to know what the black class is even without using it initially.
Thanks mate
Can someone tell me what is that text editor ?
Do you have a link to the code please. I keep running into problems every nav bar tutorial if i'm using codepen
Check the description!
when you resize the screen the text moves out of the navbar. How should we fix this?
Check out My New Video To Get Idea How You Can Make The Sticky Navbar "Responsive" !
Watch it Here : www.youtube.com/watch?v=ZeL2I...
thanks
I also subscribed
this video not working
plz help
Source Code : www.dropbox.com/sh/2so52l4q74eu470/AABDHemSW_WsLUlBfPaLsNwsa?dl=0
Hey, nice video but what software are you using to write your code?
He is using Brackets
Great video
Which software is that please reply!
I'm using Dreamweaver, but I'm not enjoying this
Brackets
@@codegrid Thanks a lot
How do you use the Java Script?
how can I make the browser go black all the time?
+Marcel Studios If you are using Chrome, then you can do it by adding custom themes.
i said there for the navegation bar, sorry, how i can do it the navegation bar black, because the color of the letters can´t see