ok, here's some code. the minimum requirement to create the effect. copy it and paste in an empty html file, then run it and see. check the code to understand how it works. delete one css line at a time to see what effect it has, then you will understand how it works: #small{ width:180px; height:150px; background-color:grey; display:inline-block; margin:10px; } #big{ width:650px; text-align:center; border:solid thin black; margin:auto; padding:10px; }
if one style is working but others are not, then there are two reasons: 1. your browser has cached the css file. to fix this, change the css filename by adding a number at the end, refresh your page twice, just to be sure the cache is flushed. then rename it back to its rightful name. if this doesnt work, then.. 2. there is a spelling error in your css, so check one by one, letter by letter. check whats different with the one that is working vs the one that is not. a simple comma can break things, so be thorough when checking . if this doesnt work, inbox me your files on facebook for analysis facebook.com/quickcode
copy and paste the code below into an empty document, save it and run it in your browser. it has a menu with dropdowns. add it to your project. you can disable some css one at a time to see what its doing so you understand the code. ul{ font-family: tahoma; list-style: none; display: flex; margin: 0; padding: 0; } ul a{ text-decoration: none; color: white; } li{ padding:10px 20px; background-color: grey; position: relative; } li:hover{ background-color: #999; } li ul li{ width: 100%; } li ul{ display: none; position: absolute; left: 0; } li:hover ul{ display: block; } .active{ background-color: #05b505; } Home Dropdown1 First 1 Second 1 Another link 1
I do everything but neiter the first photo nor the section arears appears on the screen. Everytime I do that: watch the tutorial, pause it and copy word by word... and when I look at the result... I don't know why it happens. For sure I write every letter corectly. I want to say that everything (index.html, styles.css and photos) is in one folder. Is that because my notepad version is old or something like that?
the notepad version doesnt matter. the photo or styles may not appear because of several reasons. 1. the file name you typed is not correct. make sure the file extension is also included and correct. e.g a file may have the following extensions, jpg, jpeg, png or tiff. make sure you're using the correct one like this . 2. same for the stylesheet. make sure the file name is correct plus extension. its easy to write "styles.css" instead of "style.css" and miss the mistake. sometimes the browser may cache the style sheet, meaning when you make changes, they sometimes wont show. you can clear the cache in the browser settings. another way to make sure a file is never cached is to add a query string at the end like this: . changing the 1234 to another random number will make sure the file is reloaded. this can be done for images too. overall, since all your files are in one folder, your problem is most likely file names or file extensions. just check them letter by letter to make sure. if the problem continues, try copying all styles to the index file and put them inside style tags like this: #body{ color:#000; } then you wont need to worry about filenames. hope this helps :)
that usually happens if you misspell the css file when linking it. make sure the file name spelling is correct in the index page. also dont forget the file extension of .css. go through the speling letter by letter and make sure you didnt miss anything
notepad++ is better than notepad because its meant to help you in programming. so it has many tools compared to notepad which has none. so for serious programming, you must use notepad++ or something like sublime text
@@NoLongerStranger try this playlist. it shows how to design a facebook profile. i use sublime text, but it works the same as notepad++ so you can still use notepad++ to follow along. there are many videos in the playlist but only up to part 14 is HTML, the rest is PHP th-cam.com/play/PLY3j36HMSHNWaKUC73RJlwi6oU-WTpTPM.html
All worked great until I got to the responsive design mode. I used notepad and can't understand how you got the responsive design mode bar to appear. Please help
@@25nasar right click on an empty space in the browser. click "inspect". the developer tools will appear. then press "ctrl+shift+m" or just look for the mobile phone icon on the developer tools.
is it the part with css? maybe you did not copy the css correctly. take your time and copy everything correctly because if you miss even just one character, it wont work. a missing comma or semicolon is enough to break things :)
this part is missing a closing tag: START HERE . Articles. Blog. Contact me!. fix that and try again. if that doesnt do it, make sure the styles.css file is in the same folder as the index page, then make sure its name is actuality "styles.css" check each letter one by one to make sure
hi! i am having problem with 20:15 part. i have tried doing this code like 10 times but not working.also when you add the image at 19:24 it is not working. pls help me out. BTW i really appreciate the way you are explaining each and every part in such a detail.
Hey Joel. the image at 19:24 must be in the same folder as your html page. make sure you type its correct name, go through letter by letter to confirm, include the correct file extension too. as of the 20:15 part, could you explain a bit what results you get? do the styles not work completely? or do some work and others dont? if all styles on #info dont work, then make sure the id for the divs is correct. make sure it matches the name in the styles section. usually the mistakes with css can be attributed to errors in the ids and names of divs. same thing with images. do a little checking and let me know if the problem continues
are they in a folder? if so, then you need to include that folder in their path. e.g if my images are in the same location as the website, but in a folder called "images" the path to my images would be i hope this helps :)
Thanks for sharing your video it's inspired me so much that I wish to be come a professional web designer ,I actually tried to create one but the images didn't show up and I don't know what exalt y happened ........please help me out and be my tutor
a photo is added like this: replace image.jpg with the name of your image. make sure the image is in the same folder as the home page and make sure you type the file extension correctly, e.g .jpg or .png
Sir, first of all I'd like to thank you for making this amazing videos. However, i have a problem regarding hyperlink. I could not make those menu buttons into hyperlink. I dont even know whether it needs to be done from css or html page. Could you please provide me the correct syntax and where do we need to type those codes. Thank you....all the way from India👍
Thank you for the compliment. a hyperlink is easy. it needs to be done from the HTML page. all functionality is done in the HTML page. here is an example of a link: Click here if you copy this to you page, it will take you to page2.html when you click. just make sure its in the same folder as home page
@@QuickProgramming sir, I have been using the same tag. But i think its the place that's wrong. Eg. About us it just dispositioned all the other objects. By the way, i have put all these within div tag.
@@Biss_Chhakchhuak make sure all you page names dont have spaces. change About us to "About_us". always use underscore instead of a space. eve if they are inside DIVs, they should work. the
@@QuickProgramming Its working perfect,,thank you so much. I wish you make another video like the continuation of this web site all the way from creating those button page to actually making it online. Anyway, i hope to see another video from you. Thanks again for your kindness.
am not sure what would be the problem. maybe its the ids of elements are not correct. check to make sure you named everything correctly. try and copy the styles into the same index file, so that you see if it has anything to do with file location or name
@@Nina-qw2xi do it like this: first create an index.html file. even if the .html doesnt show, its ok because the computer hides it. then in the same folder, create a css file called css.css and add your styles in there. then inside index file, add this line this is all it takes to link the files. in case your css file is named "styles.css" check to see if you havent written "styles" as 'style" coz ive done that before several times
@@nurainasyiqin2606 ok copy and paste the header tag and its style here. maybe i can spot the problem. or you send me a message on facebook with all the code facebook.com/quickcode
if you were getting some output the first time you wrote it but not anymore, it means the browser is caching the css file. so all changes wont show. you may have to change its file name and try again. but if you never got any output even the first time, then make sure the css file is in the same folder as your index page. also make sure the file name is the same name you're referencing in the index file. even one letter wrong it wont work, so check letter by letter to make sure. let me know if it works
if you were getting some output the first time you wrote it but not anymore, it means the browser is caching the css file. so all changes wont show. you may have to change its file name and try again. but if you never got any output even the first time, then make sure the css file is in the same folder as your index page. also make sure the file name is the same name you're referencing in the index file. even one letter wrong it wont work, so check letter by letter to make sure. let me know if it works
if you're using an external css file, make sure you've typed the file name correctly and its in the same folder as the index file. if that fails, copy a few styles to the index page to see if they work
Notepad is actually too advanced. I normally use the command line when I work. Only newbies fight over what IDE to use. Learn to use anything at your disposal
Hi! "display:inline-block" part isn't working. The three boxes aren't align horizontally :(( pls help
ok, here's some code. the minimum requirement to create the effect. copy it and paste in an empty html file, then run it and see. check the code to understand how it works. delete one css line at a time to see what effect it has, then you will understand how it works:
#small{
width:180px;
height:150px;
background-color:grey;
display:inline-block;
margin:10px;
}
#big{
width:650px;
text-align:center;
border:solid thin black;
margin:auto;
padding:10px;
}
@@QuickProgramming Thank you!
Hey my css page is not working on html page why first style thing is applied but other styles are not applying please help
if one style is working but others are not, then there are two reasons:
1. your browser has cached the css file. to fix this, change the css filename by adding a number at the end, refresh your page twice, just to be sure the cache is flushed. then rename it back to its rightful name. if this doesnt work, then..
2. there is a spelling error in your css, so check one by one, letter by letter. check whats different with the one that is working vs the one that is not. a simple comma can break things, so be thorough when checking .
if this doesnt work, inbox me your files on facebook for analysis facebook.com/quickcode
The content background is not working
thanks so much. It's a detailed explanation, you are good teacher.
thank you for the compliment and you're very welcome
@@QuickProgramming thanks to you
Thanks sir
you're most welcome
Thanks dude ! You're Epic !!
you're most welcome
Can we some how link the other menu buttons to other webpages
website pages connect to each other via links like this one below:
go to other page
@@QuickProgramming can you teach us how to make a contacts webpage
Thank you so much, dude.
you're most welcome
thank sooooooooooo much man. Excellent video!
sir plz help me...
how can i add drop down menu
copy and paste the code below into an empty document, save it and run it in your browser. it has a menu with dropdowns. add it to your project. you can disable some css one at a time to see what its doing so you understand the code.
ul{
font-family: tahoma;
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
ul a{
text-decoration: none;
color: white;
}
li{
padding:10px 20px;
background-color: grey;
position: relative;
}
li:hover{
background-color: #999;
}
li ul li{
width: 100%;
}
li ul{
display: none;
position: absolute;
left: 0;
}
li:hover ul{
display: block;
}
.active{
background-color: #05b505;
}
Home
Dropdown1
First 1
Second 1
Another link 1
Contact
Dropdown2
First 1
Second 1
Another link 1
About us
I do everything but neiter the first photo nor the section arears appears on the screen. Everytime I do that: watch the tutorial, pause it and copy word by word... and when I look at the result... I don't know why it happens. For sure I write every letter corectly. I want to say that everything (index.html, styles.css and photos) is in one folder. Is that because my notepad version is old or something like that?
the notepad version doesnt matter. the photo or styles may not appear because of several reasons.
1. the file name you typed is not correct. make sure the file extension is also included and correct. e.g a file may have the following extensions, jpg, jpeg, png or tiff. make sure you're using the correct one like this .
2. same for the stylesheet. make sure the file name is correct plus extension. its easy to write "styles.css" instead of "style.css" and miss the mistake. sometimes the browser may cache the style sheet, meaning when you make changes, they sometimes wont show. you can clear the cache in the browser settings. another way to make sure a file is never cached is to add a query string at the end like this: . changing the 1234 to another random number will make sure the file is reloaded. this can be done for images too.
overall, since all your files are in one folder, your problem is most likely file names or file extensions. just check them letter by letter to make sure. if the problem continues, try copying all styles to the index file and put them inside style tags like this:
#body{
color:#000;
}
then you wont need to worry about filenames. hope this helps :)
Thank you!
when i have made the styles css file it doesnt changes anything what can i do?
that usually happens if you misspell the css file when linking it. make sure the file name spelling is correct in the index page. also dont forget the file extension of .css. go through the speling letter by letter and make sure you didnt miss anything
This was grand! Thanks for the help!
does notepad++ and notepad have the same codes?
notepad++ is better than notepad because its meant to help you in programming. so it has many tools compared to notepad which has none. so for serious programming, you must use notepad++ or something like sublime text
@@QuickProgramming do u have tutorial creating html and css webdesigns using notepad++
@@NoLongerStranger try this playlist. it shows how to design a facebook profile. i use sublime text, but it works the same as notepad++ so you can still use notepad++ to follow along. there are many videos in the playlist but only up to part 14 is HTML, the rest is PHP
th-cam.com/play/PLY3j36HMSHNWaKUC73RJlwi6oU-WTpTPM.html
All worked great until I got to the responsive design mode. I used notepad and can't understand how you got the responsive design mode bar to appear. Please help
the responsive mode is inside the browser. what browser are you using?
@@QuickProgramming google
@@25nasar right click on an empty space in the browser. click "inspect". the developer tools will appear. then press "ctrl+shift+m" or just look for the mobile phone icon on the developer tools.
@@QuickProgramming will try thank you
I having problems with 13.11 part, please help me
is it the part with css? maybe you did not copy the css correctly. take your time and copy everything correctly because if you miss even just one character, it wont work. a missing comma or semicolon is enough to break things :)
@@QuickProgramming I've tried it, and keep repeating that part but still nothing changes.
hey, my html file does not connect to my css! what to do!
XXX
XXX
body{
font-fmaily; verdana, tahoma;
font-size:12px;
}
body a{
text-decoration: none;
color:#FCE963;
#wrapper{
max-width: 800px;
min-width: 350px;
margin: auto;
}
#main_title{
font-size:18 px;
letter-spacing:4px;
text-align:center;
}
#small-menu{
backgroun-color:#FCE963;
padding:4px;
color:#fff;
}
did I do smt wrong?
they are in the same file btw, my css file name is styles.css
this part is missing a closing tag:
START HERE . Articles. Blog. Contact me!.
fix that and try again. if that doesnt do it, make sure the styles.css file is in the same folder as the index page, then make sure its name is actuality "styles.css" check each letter one by one to make sure
hi!
i am having problem with 20:15 part. i have tried doing this code like 10 times but not working.also when you add the image at 19:24 it is not working. pls help me out.
BTW i really appreciate the way you are explaining each and every part in such a detail.
Hey Joel. the image at 19:24 must be in the same folder as your html page. make sure you type its correct name, go through letter by letter to confirm, include the correct file extension too. as of the 20:15 part, could you explain a bit what results you get? do the styles not work completely? or do some work and others dont? if all styles on #info dont work, then make sure the id for the divs is correct. make sure it matches the name in the styles section.
usually the mistakes with css can be attributed to errors in the ids and names of divs. same thing with images. do a little checking and let me know if the problem continues
hi
i have worked on this and i think i have figured it out. Thank you so much for your interpretation. :-)
@@joelchauhan6736 you're most welcome
Thank you, this was very good!
awesome. am happy you found it helpful
big thanks to you man !!
you're most welcome :)
Thank you for your service
Why i cant let my picture appear, theyre in the same location with the website
are they in a folder? if so, then you need to include that folder in their path. e.g if my images are in the same location as the website, but in a folder called "images" the path to my images would be i hope this helps :)
Thank you! You're the best ❤
Thanks for sharing your video it's inspired me so much that I wish to be come a professional web designer ,I actually tried to create one but the images didn't show up and I don't know what exalt y happened ........please help me out and be my tutor
Thanks for the kind words :)
The first html example is not loading but only showing the website name.
sir which of this browser run it.
this can run on any browser. in my case, am using firefox
I have problems with the Width:100% part.. I done everything correctly but nothing happens..
which part of the video is that? whats the minute and seconds?
Thanks for the help😀 Look at the Facebook.. Because I need the "buttons" work😀 Do you have a video for that?
I need your help.. I can't put the photo
a photo is added like this:
replace image.jpg with the name of your image. make sure the image is in the same folder as the home page and make sure you type the file extension correctly, e.g .jpg or .png
Sir, first of all I'd like to thank you for making this amazing videos. However, i have a problem regarding hyperlink. I could not make those menu buttons into hyperlink. I dont even know whether it needs to be done from css or html page. Could you please provide me the correct syntax and where do we need to type those codes. Thank you....all the way from India👍
Thank you for the compliment. a hyperlink is easy. it needs to be done from the HTML page. all functionality is done in the HTML page. here is an example of a link:
Click here
if you copy this to you page, it will take you to page2.html when you click. just make sure its in the same folder as home page
@@QuickProgramming sir, I have been using the same tag. But i think its the place that's wrong. Eg. About us it just dispositioned all the other objects.
By the way, i have put all these within div tag.
@@Biss_Chhakchhuak make sure all you page names dont have spaces. change About us to "About_us". always use underscore instead of a space. eve if they are inside DIVs, they should work. the
@@QuickProgramming Its working perfect,,thank you so much. I wish you make another video like the continuation of this web site all the way from creating those button page to actually making it online. Anyway, i hope to see another video from you. Thanks again for your kindness.
@@Biss_Chhakchhuak thanks. i'll make a series of videos to show how to do that soon
Can i have the source codes for this
Css is not working. The file name is correct why is it not working? Please reply ASAP thanks
am not sure what would be the problem. maybe its the ids of elements are not correct. check to make sure you named everything correctly. try and copy the styles into the same index file, so that you see if it has anything to do with file location or name
Hi when I save the .html the .html is not written is it okay?
Idk how to link them
@@Nina-qw2xi do it like this: first create an index.html file. even if the .html doesnt show, its ok because the computer hides it. then in the same folder, create a css file called css.css and add your styles in there. then inside index file, add this line this is all it takes to link the files. in case your css file is named "styles.css" check to see if you havent written "styles" as 'style" coz ive done that before several times
Last question how can I put a picture?
Why my header cannot be a small
it means your styles are not working on it. are the styles working on everything else?
@@QuickProgramming btw I forgot to put "header" at html file. And problem had solved.. thank you for the video
Yes the styles working on everything else.
@@nurainasyiqin2606 ok copy and paste the header tag and its style here. maybe i can spot the problem. or you send me a message on facebook with all the code facebook.com/quickcode
@@QuickProgramming it's okay, thank you. I had solved my problem.
hii i got a problem with the css code please help me
what kind of problem are you having?
when i am running the .css code i am not getting any output
written it in the same way as how you have given
if you were getting some output the first time you wrote it but not anymore, it means the browser is caching the css file. so all changes wont show. you may have to change its file name and try again. but if you never got any output even the first time, then make sure the css file is in the same folder as your index page.
also make sure the file name is the same name you're referencing in the index file. even one letter wrong it wont work, so check letter by letter to make sure. let me know if it works
if you were getting some output the first time you wrote it but not anymore, it means the browser is caching the css file. so all changes wont show. you may have to change its file name and try again. but if you never got any output even the first time, then make sure the css file is in the same folder as your index page.
also make sure the file name is the same name you're referencing in the index file. even one letter wrong it wont work, so check letter by letter to make sure. let me know if it works
the html works but css did not for me
if you're using an external css file, make sure you've typed the file name correctly and its in the same folder as the index file. if that fails, copy a few styles to the index page to see if they work
Same problem
Good
Thanks💓
sir plz help me😢
please sent all codes
menu works
9:35
Jesus Notepad in 2017?
Notepad is actually too advanced. I normally use the command line when I work. Only newbies fight over what IDE to use. Learn to use anything at your disposal
J
menu works