Man your videos are FIRE. Usually tutorials just say, “oh write this, write that” and your wondering what does each part do. Thankfully we have you who gives every line of code an explanation. Keep up the good work my man. 🙂
It's amazing how I ask myself questions throughout your tutorials but then you always answer them one way or another. That's what I call excellent teacher-stedent connection. Bravo.
Loving this intro video series! I have not used HTML in 23 years, so I thought I would start from the ground up again. I'm very happy I did, as CSS has obviously changed everything. I'm a Win32/64 developer who is finally relenting and facing the music concerning desktop applications... long overdue. So far so good, thanks to you. I can't believe this is a free service. Excellent!!!
Wow, I ACTUALLY learnt something with this tutorial. Funny-not-funny story; I went to college for graphic design and we had a class that was meant to teach us HTML. As you're probably guessing, we learnt nothing from it, the teacher just didn't know how to teach (For one he want us to use Dreamweaver). Matter of fact, the final project was to make a simple webpage, but everyone in class outsourced it to someone else. Worst part is that the day we were meant to present our sites, this dude didn't even came at all, we just sent it to him, God knows if he actually saw anything. I have a similar story with 3D modeling class, but that's another can of worms. What I couldn't learn in, like, 4-5 months I just did on less than a couple of hours. Granted, practice and on-going learning is crucial here, but at least I know that "I can actually learn this". You have no idea how grateful I am and I'm sure everyone here is too. Thank you, truly.
You are very welcome. I'm sorry your first experience with programming was so bad. It is truly a fun skill to learn and I am glad I could help you learn it so quickly.
@@WebDevSimplified Absolutely! I look forward for more personal growth. If any, learning how to build a personal portfolio site would be a nice practice run.
5 years back, but still amazing tutorials. Splendid work! BTW: starting this just before Christmas '23 means I happened to have my fav Christmas movie playing while I started my version. The movie is The Perfect Gift and features Jesus in (a very weak) disguise calling himself 'Jes'. While I was trying to come up with a band name, Jes was telling a modern version of the Nativity Story to some Kindergarteners; telling them how "The Great Angels started singing, like a giant rock concert in the sky..." My band name instantly became "Jes & The Great Angels". 😁😇
hi everyone, for those who is wondering why.... background-image: url("images/Background.jpg"); ....isn't able to load your picture, it's because you need to put a '/' in front of the the directory of the image is stored which in this case is 'images' like so.... background-image: url("/images/Background.jpg"); ....should be able to work like a charm after that.
@@stingrayyz1003 if you used html files from teacher's HTML Lesson 4 (like me), you need to link your HTML file with styles.css first in your 'about.html'
Hi there! Thank you for your tutorials, it’s amazing how much I’ve learned by following your examples. You not only “show how” but you also “explain in depth” the meaning behind what you are teaching. This is by far one of the better channels for beginners like me to follow, so again, thank you so much! I have a question about the font family import. Is it better to link the font family in the head of the html document, or rather as you have done here, as an import to css? Even google fonts does not provide an explanation of the difference, if there is one, so I thought I would ask you.... Cheers!
Thank you so much. The difference between using import and using a link is actually almost nothing. The link is actually just linking a stylesheet that has the exact same CSS as the import statement. If you go to the href inside the link you can see the stylesheet. Here is an example. fonts.googleapis.com/css?family=Roboto&display=swap
watching him do CSS is so helpful. if you have to figure out CSS on your own it can be so convoluted to find a good way of doing things. something even as simple as how to get the logo on your nav bar to stay where it should be can be hard at first
Nice Video! It clears a lot of my misconceptions on css. I am not studying computer science, but recently I found myself interested in doing web development! Your videos helps a lot of my self learning. Keep going:)
Awesome video, but had the issue of a high floating footer. The simple fix I found was to set html, body { height: 100%} and .container{min-height: 100%} Hope this helps anyone else who runs in the same issue.
First of all thank you Kyle for the videos, can please tell me how to get the tag to go over the image as in the original example, bcoz you left it out in the final created example.
Thanks dude, a very good guide, about the band image, you should have shown as how to place it at the middle of the words atlist so we have the idea of how.... but it was a very good tutorial.
finally a great teacher mastering how to communicate his knowledge , if you can provide us on udemy ..etc a long video to teach us deeply html,css,js,react , php, to show us how we can develop a profesionnel great website please . Thanks for sharing your good knowledge !
I am watching your videos as a recap/refresher on CSS & HTML, and I feel that it's great for that purpose, however, for anyone totally fresh in CSS, they would need to continuedly pause the video in order to keep up if they are coding along with you. I am enjoying the pace however, as I can code along with you, or try and code ahead of you to see if I am going in the same direction as you do.
Your welcome! I really enjoy creating these videos and knowing that I am helping amazing people like you is what keeps me motivated to make even better videos.
love your videos ❤🏆❤ you know what I think would be useful? Having a brief pop-up that the student can read, that appears just long enough to pause the video to read. An example use would be when you are deleting the \ right before the space in the font name, to remind the reader what the symbol is for, and maybe "refer to my video" with a card that appears at the same moment. Maybe put an arrow in the pop-up info to direct students to click "over there" --> This way, you can include even more info in your awesome awesome videos, without slowing down
Thank you! I went to college for a computer engineering degree, but they didn't teach web development at my school, so most of the web development I know was learned from watching UA-cam videos, reading blogs, creating projects, and working as an intern. Now I do web development full time so I am constantly learning new things at my job and through videos/blogs etc.
Very helpful and insightful tutorial. You have my thanks. Anyone else having trouble with importing fonts? I can't seem to get the Booter - zero zero font to work.
Hi thanks for the great video you helped me understand the thought process behind styling a website:) I have a question though. At 13:32 of the video you used padding to space the nav li elements out horizontally. May I know the rationale behind using padding over margin to separate the elements? I used margin: 0 5%; which still gives the same effect.
In general there isn't much difference between padding and margin for spacing elements out. Margin will collapse so if two sibling elements have 5px margin then there will only be 5px between them while if they had 5px padding then there would be 10px between them. Also padding expands the background so if you want to expand the background then you need to use padding.
For some reason the footer isn't at the bottom of the page. There's a lot of white space below it, any suggestions? I think it has something to do with being at default zoom, I noticed you were zoomed in.
Just figured it out :) .main-footer { background-color: #56CCF2; color: white; padding: .25em 0; /* This is how you make a footer fixed at the bottom - Start */ position: absolute; bottom: 0; width: 100%; height: 86px; /* Height of the footer */ /* End -This is how you make a footer fixed at the bottom */
What’s the difference between using a class for your list items and for the links? Aren’t they the same thing? Also why did you make the list items inline and then the links inline-block?
Is there a difference from linking my fonts in the html head then what you did here. Does this limit me on making changes in my css style sheet? does make sense what im asking lol
After following this tutorial I noticed a white blank space beneath the footer I tought I made a mistake so I coppied the code from github I still have the white space. Does anybody know what this is? I am using the latest google chrome version and havent changed any settings
Because the web page does not take 100% of the height of your screen. This can be fixed applying a min-height property on the section element something like this min-height: calc(100vh - X) , where X is whatever height your header has + whatever height your footer has.
Hi there, awesome lessons!! Got a question: If you make a class: and make a reference to it in style.css: .nav and .main-nav. How does that link to each other? I don't understand this part because the class is one name " nav main-nav. How can CSS see which part it is?
Hi web dev simplified! Thanks for your tutorials, they're extremely helpful and well organized. I ran into a problem though and haven't been able to figure it out on my own. Whenever you start working on the blue footer for the bottom of the page, I can't figure out why mine isn't all the way at the bottom of the page. but just under all the content more in the center of the page. Can I send you my code so you can look into it? Or if it's a simple solution, please let me know. Thank you! And anyone is welcome to give and tips or advice!
Okay i have got a fix. i don,t know if anybody is still wondering but for me i had not enough text. so i basicly because there is not enough text in youre p element it can,t reach the bottem of the page. so just add some more rules of text until it reaches the bottem on a browser full size. :)
Hey man I know this is a year later but if anybody else has this question it's not because there is an error in the code, but it's just how sections work. So as of right now the footer will print just after the last text you enter in and maybe your is not occupying your whole page because you are not telling it to do that. If you don't have enough text, what you could do is use this property: min-height: 100% inside your .content-section class, or the class you are using to wrap the content before footer. The property will make the section occupy 100% height of your screen and the footer will print after it
My footer did not align like yours does, and I looked through all the code, and it was the same from what I could see. Then I copied yours in over mine, first CSS, and no change, then HTML, and it changed. But I looked through it again, and nothing different. Except the length of your paragraphs. The "Lorem ipsum" text Visual Studio Code enters when you type in "lor" and hit tab to auto complete it, is shorter than what you had. So with less text, the footer doesn't align correctly cause it's pushed down enough by the paragraphs it seems. Anyway, thanks for these videos, it's a great refresher for someone who hasn't touched this stuff since the beginning of the century.
The following should work: First add "margin-top: auto;" to the main-footer class: .main-footer { background-color: #56CCF2; color: white; padding: .25em 0; margin-top: auto; } Then create a new body selector as follows: body{ min-height: 100vh; display: flex; flex-direction: column; }
great demonstration. i just wanted to suggest that the fonts should not be refered to other site , what would happen for instance if google has a problem or any site in which the font resides. so it it preferable to have the fonts on the server
I noticed that the 'About' header is only centre aligned (with the band header) until the window reaches a certain size, at a certain size (almost fullscreen) its more towards the left n not aligned with the top band
How in the world would I know that for example #333 is a type of light grey and so on. I mean how many colors are there, and how do I figure out the corresponding numbers ?
Thank you for the tutorial it is amazing but I am having a problem that the footer is not at the bottom of the page, its position is right after the about section
Hey man, your videos have been super helpful! However, when I finished my website, mine had a bunch of white space after the footer. Have you seen anyone on here with the same problem? Do you have any tips on how to fix it, or if you think I missed something?
Hello all, for some reason my header picture doesn't reach the top edge of the page. It sticks to the navigation bar which I have placed at the very top of the website. I tried to follow the instructions as best as I can, but it seems impossible. What could I do? Thanks in advance!
I can't make the footer fixed at the bottom,so I use footer{ position:fixed; width:100%; height:60px; margin-bottom: 0; bottom: 0; background-color: rgba(100,100,100,.9); } Is that ok?
Hey, thank you so much for the great tutorial. I am trying to learn the basics of web development before going back to school for the fall semester. For the CSS, I am a little bit confused by the semicolon, I've noticed that we use it for some statements and we do not for others. Is there a general rule for the use of semicolon? Thank you again for the great effort you have put in these videos.
hi thank you for the tutorial I'm watching it on freecode camp I want to ask about font where to download the booter zero zero and why is it '.ttf' not like you '.woff' even i'm trying to download another fonts and it doesn't work
var quantity=quantityElement.value I got this error on this line of code (store.js:31 Uncaught TypeError: Cannot read properties of undefined (reading 'value')). They cannot read the value of the input field. Anyone please help!
Hi, got stuck by the main-header background image. Cannot show any image as background. When testing the link I get "An error occured while loading the image".
Hi, can you tell me where can i get some similar logo images like youtube logo you use please ? i'd searched for twitter logo with transparent background but i can't find those logo like you use in the video.
.main-nav { text-align : center} Is not working for me what could be the problem ??? The home, store and about are not aligning to center !! They do change their position for a second but quickly reverts back to their original position
Awesome series! One question, does the imported font have to be in woff format? I've downloaded BZZ from urbanfonts.com, but they've all been saved as TrueType font files (file name in my fonts folder is BOOTERZZ.ttf). I can't seem to connect my HTML to it regardless of putting the source as ending in .ttf or .woff.
Hey thanks again for your videos they are really well presented. Could you please make one about SVGs, I'm struggling to modify SVGs in css without pasting the entire svg code. I don't understand how to create a class containing the svg code and then call it with to be able to change the color etc. Thanks in advance!
I'm wondering why use classes named "main-footer" and "main-header" when there should be only one header and one footer. Why not simply use footer {} and header {} ?
There could be an instance where I would want more than one header or footer but as you said it is not common or normal. The main reason I used classes is because right now the site works fine if I use the element names as selectors but if I add new pages maybe to a seperate section of the website that look completely different I will want to style my head and footer different for those pages and if I use classes I can do that, but with element selectors I cannot style them differently.
@@WebDevSimplified The header style will be replaced if a class is applied to the header. codepen.io/victorjozwicki/pen/wQzGeG (I'm just messing around to be fair :D, appreciated the whole series even if I'm not per say, a real beginner)
It is true that it will be overwritten, but you must override every property you define in the base header element selector and that can become a nightmare especially as you change the original header and then need to change the other header classes.
Are you sure you are copying the correct address. It should end in .jpg or .png most likely. Also do you get any errors in the developer tools in your browser?
I did same code but when I am opening the page in full screen my footer is moving upwards and it is overlaping with the band pic. Can u explain the reason please!!
It's generally good coding practice to close off end tags with a forward slash. Especially if you happened to change your Doctype to a different standard such as XHTML which uses a much stricter syntax.
Man your videos are FIRE. Usually tutorials just say, “oh write this, write that” and your wondering what does each part do. Thankfully we have you who gives every line of code an explanation. Keep up the good work my man. 🙂
high cyber five, i am in love with his videos too ❤ definitely want to understand how to connect the dots
Yes, he explains everything 😍
Copied comment
I started my webdevelopment journey with this video, damn i couldn't even link a image at that time. You will always remain special to me kyle❤️
I'm so glad I was able to help you get started
It's amazing how I ask myself questions throughout your tutorials but then you always answer them one way or another. That's what I call excellent teacher-stedent connection. Bravo.
Loving this intro video series! I have not used HTML in 23 years, so I thought I would start from the ground up again. I'm very happy I did, as CSS has obviously changed everything. I'm a Win32/64 developer who is finally relenting and facing the music concerning desktop applications... long overdue. So far so good, thanks to you. I can't believe this is a free service. Excellent!!!
haha crazy! size your a og developer i have a question what is the used for
@@elytra1081 a div you can imagine as a "box" in which your thing will be. It doesnt have a specific place tho, its just separated from the rest
Wow, I ACTUALLY learnt something with this tutorial. Funny-not-funny story; I went to college for graphic design and we had a class that was meant to teach us HTML. As you're probably guessing, we learnt nothing from it, the teacher just didn't know how to teach (For one he want us to use Dreamweaver). Matter of fact, the final project was to make a simple webpage, but everyone in class outsourced it to someone else. Worst part is that the day we were meant to present our sites, this dude didn't even came at all, we just sent it to him, God knows if he actually saw anything. I have a similar story with 3D modeling class, but that's another can of worms.
What I couldn't learn in, like, 4-5 months I just did on less than a couple of hours. Granted, practice and on-going learning is crucial here, but at least I know that "I can actually learn this". You have no idea how grateful I am and I'm sure everyone here is too. Thank you, truly.
You are very welcome. I'm sorry your first experience with programming was so bad. It is truly a fun skill to learn and I am glad I could help you learn it so quickly.
@@WebDevSimplified Absolutely! I look forward for more personal growth. If any, learning how to build a personal portfolio site would be a nice practice run.
I just recently made my first ever website made from html and css, I’m so proud of myself but super thankful for your work and teachings. ❤️
I learned more from this video than what I’ve learned from my Web Development college class.
5 years back, but still amazing tutorials. Splendid work!
BTW: starting this just before Christmas '23 means I happened to have my fav Christmas movie playing while I started my version. The movie is The Perfect Gift and features Jesus in (a very weak) disguise calling himself 'Jes'. While I was trying to come up with a band name, Jes was telling a modern version of the Nativity Story to some Kindergarteners; telling them how "The Great Angels started singing, like a giant rock concert in the sky..." My band name instantly became "Jes & The Great Angels". 😁😇
hi everyone, for those who is wondering why.... background-image: url("images/Background.jpg"); ....isn't able to load your picture, it's because you need to put a '/' in front of the the directory of the image is stored which in this case is 'images' like so.... background-image: url("/images/Background.jpg"); ....should be able to work like a charm after that.
Thanks.
Is there a alternative because it is still not working :(
@@stingrayyz1003 if you used html files from teacher's HTML Lesson 4 (like me), you need to link your HTML file with styles.css first in your 'about.html'
hi you probably having something overriding it maby the background color?
@@startplo12 haha what class
Hi there! Thank you for your tutorials, it’s amazing how much I’ve learned by following your examples. You not only “show how” but you also “explain in depth” the meaning behind what you are teaching. This is by far one of the better channels for beginners like me to follow, so again, thank you so much! I have a question about the font family import. Is it better to link the font family in the head of the html document, or rather as you have done here, as an import to css? Even google fonts does not provide an explanation of the difference, if there is one, so I thought I would ask you.... Cheers!
Thank you so much. The difference between using import and using a link is actually almost nothing. The link is actually just linking a stylesheet that has the exact same CSS as the import statement. If you go to the href inside the link you can see the stylesheet. Here is an example. fonts.googleapis.com/css?family=Roboto&display=swap
if i got a professor like him i would gonan have a A++ in the end of the semester
@@jinbo369 If I've gotten a professor like him I would have been expelled for sexual harassment
@@zaketenyu1932 pause wth
watching him do CSS is so helpful. if you have to figure out CSS on your own it can be so convoluted to find a good way of doing things. something even as simple as how to get the logo on your nav bar to stay where it should be can be hard at first
I watched whole 1:30 s of ad so that you can earn...I find this project work very effective to learn
Thank you for the support!
Thanks a lot man. It is working great. I went on my home network on another PC and browsed the webpage. Great. Thanks again.
Thank you Kyle, Your videos are very helpful for beginners like me.
Nice Video! It clears a lot of my misconceptions on css. I am not studying computer science, but recently I found myself interested in doing web development! Your videos helps a lot of my self learning. Keep going:)
This playlist is brilliant. Thankyou.
Awesome video, but had the issue of a high floating footer. The simple fix I found was to set html, body { height: 100%} and .container{min-height: 100%}
Hope this helps anyone else who runs in the same issue.
Thank you! Had this issue. Much appreciated!
First of all thank you Kyle for the videos, can please tell me how to get the tag to go over the image as in the original example, bcoz you left it out in the final created example.
thank you very much for this tutorial It was very helpful
Thanks dude, a very good guide, about the band image, you should have shown as how to place it at the middle of the words atlist so we have the idea of how.... but it was a very good tutorial.
great video. haven't css'd in 7 years. this was a perfect refresh and i solidified some core concepts. cheers!
Thank you so much, you are a great teacher)
finally a great teacher mastering how to communicate his knowledge , if you can provide us on udemy ..etc a long video to teach us deeply html,css,js,react , php, to show us how we can develop a profesionnel great website please . Thanks for sharing your good knowledge !
Really an amazing video. It is compact without any rambling but still explains things well.
Thank you, I was able to put up my first website thanks to this tutorial.
I am watching your videos as a recap/refresher on CSS & HTML, and I feel that it's great for that purpose, however, for anyone totally fresh in CSS, they would need to continuedly pause the video in order to keep up if they are coding along with you. I am enjoying the pace however, as I can code along with you, or try and code ahead of you to see if I am going in the same direction as you do.
can somebody help me please? I do all the stuff but when I give the url for the header image in .main-header and save nothing shows up.
Amazing, amazing content. BTW did anyone mention you look like JFK Jr? I was crushed when he went, but happy to see a a look alike.
quick reminder: .ttf files need to be adressed as "truetype" in the format selector
Nice one dude 👍
Thank you soooo much for the effort u put in to this
Your welcome! I really enjoy creating these videos and knowing that I am helping amazing people like you is what keeps me motivated to make even better videos.
I will watch and use all your videos
love your videos ❤🏆❤ you know what I think would be useful? Having a brief pop-up that the student can read, that appears just long enough to pause the video to read.
An example use would be when you are deleting the \ right before the space in the font name, to remind the reader what the symbol is for, and maybe "refer to my video" with a card that appears at the same moment. Maybe put an arrow in the pop-up info to direct students to click "over there" -->
This way, you can include even more info in your awesome awesome videos, without slowing down
this is gold. thank you for making this video.
Hi web dev simplified First let me Thank you I was able to learn So much By watching this tutorial so thanks again
great work man! your videos will make learning web development much easier! how did you learn all this?
Thank you! I went to college for a computer engineering degree, but they didn't teach web development at my school, so most of the web development I know was learned from watching UA-cam videos, reading blogs, creating projects, and working as an intern. Now I do web development full time so I am constantly learning new things at my job and through videos/blogs etc.
@@WebDevSimplified Nice! Keep it up!
@@WebDevSimplified 😊
Specificity : !Important > Inline-Style > IDs > Class > HTML Elements => 0,2,5.4,12 respectively. (CSS => Top to Bottom)
I am learning a lot from this video
Thanks bro you're the best fr
Very helpful and insightful tutorial. You have my thanks.
Anyone else having trouble with importing fonts? I can't seem to get the Booter - zero zero font to work.
Hi thanks for the great video you helped me understand the thought process behind styling a website:) I have a question though. At 13:32 of the video you used padding to space the nav li elements out horizontally. May I know the rationale behind using padding over margin to separate the elements? I used margin: 0 5%; which still gives the same effect.
In general there isn't much difference between padding and margin for spacing elements out. Margin will collapse so if two sibling elements have 5px margin then there will only be 5px between them while if they had 5px padding then there would be 10px between them. Also padding expands the background so if you want to expand the background then you need to use padding.
Thanks for making such an amazing videos.
how can nav class have two different names?
Ty! Rly like your style :D
For some reason the footer isn't at the bottom of the page. There's a lot of white space below it, any suggestions?
I think it has something to do with being at default zoom, I noticed you were zoomed in.
Just figured it out :)
.main-footer {
background-color: #56CCF2;
color: white;
padding: .25em 0;
/* This is how you make a footer fixed at the bottom - Start */
position: absolute;
bottom: 0;
width: 100%;
height: 86px; /* Height of the footer */
/* End -This is how you make a footer fixed at the bottom */
What’s the difference between using a class for your list items and for the links? Aren’t they the same thing? Also why did you make the list items inline and then the links inline-block?
It's just simple and awesome! Thank you bro!
Is there a difference from linking my fonts in the html head then what you did here. Does this limit me on making changes in my css style sheet? does make sense what im asking lol
After following this tutorial I noticed a white blank space beneath the footer
I tought I made a mistake so I coppied the code from github
I still have the white space.
Does anybody know what this is?
I am using the latest google chrome version and havent changed any settings
Because the web page does not take 100% of the height of your screen. This can be fixed applying a min-height property on the section element something like this min-height: calc(100vh - X) , where X is whatever height your header has + whatever height your footer has.
@@StormRaiderR thank you!
liking the video, but i'm at 24:46 and i'd like to know how to get the band image a little down so the font goes over the top, like the example..?
Thank you so so much
You help me so much
Thank you again
You're welcome! I am really glad I could help.
This guy is the best.
Buddy my social media logo on footer aren't aligning at the end
Maybe because of . container class as we have set max-width to 900px
How do I fix this
Hi there! Im following the project and loving it. My page looks the same, except for the band picture inside the circle which is a litlle distorted.
I’m adding in the background on the main header and nothing’s happening hoping someone know how to fix this
Hi there, awesome lessons!! Got a question:
If you make a class: and make a reference to it in style.css: .nav and .main-nav. How does that link to each other? I don't understand this part because the class is one name " nav main-nav. How can CSS see which part it is?
i think the space separates them, not sure tho
@@alex.kal1 you are assigning two classes to the element
how to change the color of logos in footer section like youtube,spotify,facebook
Amazing classes! Help a lot for me!
Wow! fantastic video. I subscribed to your channel hurriedly.
Hi web dev simplified! Thanks for your tutorials, they're extremely helpful and well organized. I ran into a problem though and haven't been able to figure it out on my own. Whenever you start working on the blue footer for the bottom of the page, I can't figure out why mine isn't all the way at the bottom of the page. but just under all the content more in the center of the page. Can I send you my code so you can look into it? Or if it's a simple solution, please let me know. Thank you! And anyone is welcome to give and tips or advice!
I have the same problem, was wondering if a was the only one :p
i have the exact same problem is there already a fix? :p
Okay i have got a fix. i don,t know if anybody is still wondering but for me i had not enough text.
so i basicly because there is not enough text in youre p element it can,t reach the bottem of the page.
so just add some more rules of text until it reaches the bottem on a browser full size. :)
@@jurreversluis4365 Thanks man!
Hey man I know this is a year later but if anybody else has this question it's not because there is an error in the code, but it's just how sections work. So as of right now the footer will print just after the last text you enter in and maybe your is not occupying your whole page because you are not telling it to do that. If you don't have enough text, what you could do is use this property: min-height: 100% inside your .content-section class, or the class you are using to wrap the content before footer. The property will make the section occupy 100% height of your screen and the footer will print after it
My footer did not align like yours does, and I looked through all the code, and it was the same from what I could see. Then I copied yours in over mine, first CSS, and no change, then HTML, and it changed. But I looked through it again, and nothing different. Except the length of your paragraphs. The "Lorem ipsum" text Visual Studio Code enters when you type in "lor" and hit tab to auto complete it, is shorter than what you had. So with less text, the footer doesn't align correctly cause it's pushed down enough by the paragraphs it seems.
Anyway, thanks for these videos, it's a great refresher for someone who hasn't touched this stuff since the beginning of the century.
The following should work:
First add "margin-top: auto;" to the main-footer class:
.main-footer {
background-color: #56CCF2;
color: white;
padding: .25em 0;
margin-top: auto;
}
Then create a new body selector as follows:
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
Why was one font imported and another downloaded and defined with font-family? What's the difference and why should I do it one way or the other?
My aspect ratio of the image fucks up in about us page the band looks longer. What can I do?
great demonstration. i just wanted to suggest that the fonts should not be refered to other site , what would happen for instance if google has a problem or any site in which the font resides. so it it preferable to have the fonts on the server
Display: flex doesn't do anything for me so those icons on the footer are still under the generics text
I noticed that the 'About' header is only centre aligned (with the band header) until the window reaches a certain size, at a certain size (almost fullscreen) its more towards the left n not aligned with the top band
How in the world would I know that for example #333 is a type of light grey and so on. I mean how many colors are there, and how do I figure out the corresponding numbers ?
The background image didn't show up i made on my web page and yours but again dont show it why?
Pls tell the answer
Don't write the url of the image in Quotation marks
Thanks
Why is the navbar slightly off center? I don't understand.
Thank you for the tutorial it is amazing but I am having a problem that the footer is not at the bottom of the page, its position is right after the about section
can someone help me fix that?
Hey man, your videos have been super helpful! However, when I finished my website, mine had a bunch of white space after the footer. Have you seen anyone on here with the same problem? Do you have any tips on how to fix it, or if you think I missed something?
Hello all, for some reason my header picture doesn't reach the top edge of the page. It sticks to the navigation bar which I have placed at the very top of the website. I tried to follow the instructions as best as I can, but it seems impossible. What could I do? Thanks in advance!
Such great tutorials. I've been using "vmax" instead of "em" and love the results. Any reason you use em? Sizing is so hard to understand
whyin all what you create background color did not go red?
I can't make the footer fixed at the bottom,so I use
footer{
position:fixed;
width:100%;
height:60px;
margin-bottom: 0;
bottom: 0;
background-color: rgba(100,100,100,.9);
}
Is that ok?
I am facing the same issue. It's not working for store.html
Thank you for this!!!
nice job, thank you very much
Great.
Hey, thank you so much for the great tutorial. I am trying to learn the basics of web development before going back to school for the fall semester. For the CSS, I am a little bit confused by the semicolon, I've noticed that we use it for some statements and we do not for others. Is there a general rule for the use of semicolon? Thank you again for the great effort you have put in these videos.
hi thank you for the tutorial I'm watching it on freecode camp I want to ask about font where to download the booter zero zero and why is it '.ttf' not like you '.woff' even i'm trying to download another fonts and it doesn't work
var quantity=quantityElement.value
I got this error on this line of code (store.js:31 Uncaught TypeError: Cannot read properties of undefined (reading 'value')). They cannot read the value of the input field. Anyone please help!
Hi, got stuck by the main-header background image. Cannot show any image as background. When testing the link I get "An error occured while loading the image".
i also couldnt figure it out.
Gustav Klint put a / before Images in the url() in the css
@@SaifUlIslam-lw3dm that background image should be in css file location
Hi, can you tell me where can i get some similar logo images like youtube logo you use please ?
i'd searched for twitter logo with transparent background but i can't find those logo like you use in the video.
how do we download the booter zero zero font??
.main-nav { text-align : center}
Is not working for me what could be the problem ??? The home, store and about are not aligning to center !!
They do change their position for a second but quickly reverts back to their original position
why my footer block the paragraph view?
nice work. I learned a lot. I subscribed your channel
Thank you so much. I really appreciate it.
Awesome series!
One question, does the imported font have to be in woff format? I've downloaded BZZ from urbanfonts.com, but they've all been saved as TrueType font files (file name in my fonts folder is BOOTERZZ.ttf). I can't seem to connect my HTML to it regardless of putting the source as ending in .ttf or .woff.
yeah i had a similar issue actually
This vidoes really helpful. Thank you so much
Noramlly don't you use reset.css for reset all the standard css style, and the re-style the element you need?
code in css file not showing in live server :(
About page Done ✅
2 more to go...
Can someone tell me to make an image fit the entire screen, without looking stretched out
Background cover
where can i download the font that has filetype of woff i can't find that filetype result only ttf
Rayel Delacruz just replace woff with ttf
Edit: in the format for the font in the css
Hey thanks again for your videos they are really well presented. Could you please make one about SVGs, I'm struggling to modify SVGs in css without pasting the entire svg code. I don't understand how to create a class containing the svg code and then call it with to be able to change the color etc. Thanks in advance!
ever figure it out lol?
how did he upload those fonts, like the woff one. He downloaded them to his computer or something?
yes.
Ok his about page he has a photo but there isn’t one in the tab and his photo reaches to the bottom does anyone know why mine doesn’t?
I'm wondering why use classes named "main-footer" and "main-header" when there should be only one header and one footer. Why not simply use footer {} and header {} ?
There could be an instance where I would want more than one header or footer but as you said it is not common or normal. The main reason I used classes is because right now the site works fine if I use the element names as selectors but if I add new pages maybe to a seperate section of the website that look completely different I will want to style my head and footer different for those pages and if I use classes I can do that, but with element selectors I cannot style them differently.
@@WebDevSimplified The header style will be replaced if a class is applied to the header. codepen.io/victorjozwicki/pen/wQzGeG
(I'm just messing around to be fair :D, appreciated the whole series even if I'm not per say, a real beginner)
It is true that it will be overwritten, but you must override every property you define in the base header element selector and that can become a nightmare especially as you change the original header and then need to change the other header classes.
@@WebDevSimplified Yes, indeed ...
Thank you so much
I'm copying the image address from google, but it won't show in the background of the header
Are you sure you are copying the correct address. It should end in .jpg or .png most likely. Also do you get any errors in the developer tools in your browser?
Do you have a course
I did same code but when I am opening the page in full screen my footer is moving upwards and it is overlaping with the band pic. Can u explain the reason please!!
Hi, I had the same problem. So I googled how to fixed it, this site (css-tricks.com/couple-takes-sticky-footer/) gives you a few ways to fixed it.
why end the link element with a slash?
It's generally good coding practice to close off end tags with a forward slash. Especially if you happened to change your Doctype to a different standard such as XHTML which uses a much stricter syntax.