How to Style a Modern Website (Part One)

[@juanponcedeleon8617]

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

[@skeeterburke]

high cyber five, i am in love with his videos too ❤ definitely want to understand how to connect the dots

[@jawad_youtube]

Yes, he explains everything 😍

[@quanten]

Copied comment

[@Mila-andforwhat]

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.

[@kaustav-g1t]

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

[@WebDevSimplified]

I'm so glad I was able to help you get started

[@mfchaz]

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

[@XradicalD]

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.

[@WebDevSimplified]

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.

[@XradicalD]

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

[@mangyjc1451]

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

[@elytra1081]

haha crazy! size your a og developer i have a question what is the used for

[@alex.kal1]

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

[@Sabrecho]

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

[@Joseph-ut4wx]

I can't believe that I have built my first website...Thanks to you.

[@belulok3964]

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.

[@satyajitchattopadhyayyt]

Thanks.

[@stingrayyz1003]

Is there a alternative because it is still not working :(

[@startplo12]

@@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'

[@elytra1081]

hi you probably having something overriding it maby the background color?

[@elytra1081]

@@startplo12 haha what class

[@LaithFGC]

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

[@chriscruz429]

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

[@jaredmays4305]

This intro to CSS is BOMB bro! Thanks for everything you do. 🙌

[@nikelepz410]

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

[@WebDevSimplified]

Thank you for the support!

[@rcasturi55]

Thanks a lot man. It is working great. I went on my home network on another PC and browsed the webpage. Great. Thanks again.

[@hiwayshoes]

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!

[@WebDevSimplified]

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

[@jinbo369]

if i got a professor like him i would gonan have a A++ in the end of the semester

[@zaketenyu1932]

@@jinbo369 If I've gotten a professor like him I would have been expelled for sexual harassment

[@frenchiejr]

@@zaketenyu1932 pause wth

[@wixclub]

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

[@thomasjessop9144]

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.

[@davidseeley558]

Thank you! Had this issue. Much appreciated!

[@samirsamir7779]

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 !

[@andrewlee7574]

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

[@Games.On.Wheels]

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

[@DanShirley]

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

[@kaleidscope927]

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.

[@savithakrishnan1404]

Thank you Kyle, Your videos are very helpful for beginners like me.

[@henriumc]

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.

[@toastpulver3422]

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

[@dwoodz1]

Nice one dude 👍

[@jsmithtraveller]

This playlist is brilliant. Thankyou.

[@joegiusti528]

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

[@RNMERIA]

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.

[@f.r.i.e.n.d.s8874]

thank you very much for this tutorial It was very helpful

[@skeeterburke]

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

[@chemsochemso267]

Thanks bro you're the best fr

[@elvira_iliasova]

Thank you so much, you are a great teacher)

[@o1techacademy]

I am learning a lot from this video

[@cheeksmcclappeth6407]

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.

[@moukkuahmed8157]

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

[@RareBM]

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

[@vlaxi8787]

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

[@WebDevSimplified]

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

[@vlaxi8787]

@@WebDevSimplified Nice! Keep it up!

[@selvamanir8671]

​@@WebDevSimplified 😊

[@markbaladad6710]

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

[@WebDevSimplified]

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.

[@markbaladad6710]

I will watch and use all your videos

[@teneoultrius6340]

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

[@Tesseract9630]

This guy is the best.

[@lilili765]

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

[@Tesseract9630]

this is gold. thank you for making this video.

[@mohamedfaqrullah1145]

why my footer block the paragraph view?

[@abdulwehabmohammed5580]

Thanks for making such an amazing videos.

[@sachinkoli-3935]

how can nav class have two different names?

[@jawad_youtube]

About page Done ✅ 2 more to go...

[@alibabets]

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.

[@msms3260]

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.

[@Alexandra-Rex]

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.

[@bhavishramdin2426]

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; }

[@gkingkamehajojo8651]

Ty! Rly like your style :D

[@لولي-ط6ت9ر]

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

[@WebDevSimplified]

You're welcome! I am really glad I could help.

[@nadirzdf]

Amazing classes! Help a lot for me!

[@erfelipe]

Great.

[@benjaminteoh2511]

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.

[@WebDevSimplified]

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.

[@danieldelapaz3102]

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!

[@robinmolenaar5768]

I have the same problem, was wondering if a was the only one :p

[@jurreversluis4365]

i have the exact same problem is there already a fix? :p

[@jurreversluis4365]

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

[@Snooker219]

@@jurreversluis4365 Thanks man!

[@toxcastel]

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

[@GetYourSelfTogether803]

This vidoes really helpful. Thank you so much

[@rosaprint8676]

Thanks

[@benallen4986]

Made me sad to cut the guitarist out of the photo lol

[@hipno8686]

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

[@ufotofu9]

Nice video. I want to mention that you shouldn't have file names with spaces. I mention that only b/c a lot of beginners are here and they need to start off with good habits.

[@nojuskriauciunas8719]

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

[@zyzzyboy6840]

Thank you so much

[@martijnnvt6949]

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?

[@alex.kal1]

i think the space separates them, not sure tho

[@Pinkman443]

@@alex.kal1 you are assigning two classes to the element

[@ishicoorens6163]

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

[@StormRaiderR]

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.

[@ishicoorens6163]

@@StormRaiderR thank you!

[@shaifullahmunir71]

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

[@cristinaqi256]

nice job, thank you very much

[@hamzabannouri5196]

dude you rock!

[@miloschmanic9493]

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

[@JJohnny224]

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.

[@1ryqw989]

Thank you

[@sachinkoli-3935]

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

[@mosese4524]

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 ?

[@IMdrummerTab]

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

[@IMdrummerTab]

can someone help me fix that?

[@sumitrai1931]

Love ❤️ from India

[@Apocalyptic_Revelation]

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

[@marvinwenn330]

Love this

[@markchristophercornelio8161]

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

[@WebDevSimplified]

Thank you so much. I really appreciate it.

[@rammzzi]

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

[@linconl2367]

Nice

[@mr.luna12]

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?

[@Aceo_0]

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.

[@tessat1693]

13:49

[@IG7799-c4u]

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.

[@georgechaitides5198]

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 */

[@Redwane-Music]

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

[@gwenaeloppitz3972]

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!

[@cadeheinberg3047]

ever figure it out lol?

[@samermazraani9011]

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

[@gustavklint3157]

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

[@SaifUlIslam-lw3dm]

i also couldnt figure it out.

[@samuelhulme8347]

Gustav Klint put a / before Images in the url() in the css

[@nithish7235]

@@SaifUlIslam-lw3dm that background image should be in css file location

[@KwangSooLee-m7w]

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

[@forhadrh]

Cool! :)

[@thegeeeeeeeeee]

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

[@crazydillan8430]

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!

[@ambareen2368]

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?

[@chuongcao9239]

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.

[@ergi9527]

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

[@SpaceRanger21]

Don't write the url of the image in Quotation marks

[@Naverdo]

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

[@badselection94]

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.

[@neehiki4741]

yeah i had a similar issue actually

[@lwhite1083]

Can someone tell me to make an image fit the entire screen, without looking stretched out

[@YosefEliezrie]

Background cover

[@michaelvexler]

nice job :)

[@WebDevSimplified]

Thanks!

[@victorjozwicki8179]

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 {} ?

[@WebDevSimplified]

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.

[@victorjozwicki8179]

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

[@WebDevSimplified]

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.

[@victorjozwicki8179]

@@WebDevSimplified Yes, indeed ...

[@itsjonah26]

I'm copying the image address from google, but it won't show in the background of the header

[@WebDevSimplified]

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?

[@gustavklint3157]

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