How to Style a Modern Website (Part One) 

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. 🙂

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.

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❤️

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.

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". 😁😇

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. ❤️

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!!!

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.

I watched whole 1:30 s of ad so that you can earn...I find this project work very effective to learn

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:)

I learned more from this video than what I’ve learned from my Web Development college class.

Really an amazing video. It is compact without any rambling but still explains things well.

great video. haven't css'd in 7 years. this was a perfect refresh and i solidified some core concepts. cheers!

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.

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

This playlist is brilliant. Thankyou.

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!

Amazing classes! Help a lot for me!

Thank you so much, you are a great teacher)

this is gold. thank you for making this video.

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.

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 !

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

Wow! fantastic video. I subscribed to your channel hurriedly.

Hi web dev simplified First let me Thank you I was able to learn So much By watching this tutorial so thanks again

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.

Thanks bro you're the best fr

It's just simple and awesome! Thank you bro!

Thank you, I was able to put up my first website thanks to this tutorial.

Specificity : !Important > Inline-Style > IDs > Class > HTML Elements => 0,2,5.4,12 respectively. (CSS => Top to Bottom)

Ty! Rly like your style :D

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.

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.

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.

nice job, thank you very much

This vidoes really helpful. Thank you so much

thank you very much for this tutorial It was very helpful

I am learning a lot from this video

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.

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.

Thank you so so much You help me so much Thank you again

Thank you soooo much for the effort u put in to this

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?

nice work. I learned a lot. I subscribed your channel

quick reminder: .ttf files need to be adressed as "truetype" in the format selector

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.

Great.

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..?

Love this

This guy is the best.

great work man! your videos will make learning web development much easier! how did you learn all this?

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.

Thanks for making such an amazing videos.

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

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

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

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?

Thank you so much

Thanks

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

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.

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

nice job :)

dude you rock!

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!

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.

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!

Thank you

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?

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!

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?

About page Done ✅ 2 more to go...

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.

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 ?

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.

Nice

Noramlly don't you use reset.css for reset all the standard css style, and the re-style the element you need?

My aspect ratio of the image fucks up in about us page the band looks longer. What can I do?

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

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

how to change the color of logos in footer section like youtube,spotify,facebook

Display: flex doesn't do anything for me so those icons on the footer are still under the generics text

Cool! :)

I’m adding in the background on the main header and nothing’s happening hoping someone know how to fix this

10:08 turn list to inline 23:00 about band image work

whyin all what you create background color did not go red?

Why is the navbar slightly off center? I don't understand.

.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

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

how do we download the booter zero zero font??

Do you have a course

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!

Hey I'm new to Css and just wanna ask if to design my website is it needed to create another file type for css?

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".

Solved. So the url("images/Header Background.jpg"); wasn't working but ulr("/images/Header\ Background.jpg");.

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?

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?

how did he upload those fonts, like the woff one. He downloaded them to his computer or something?