Teaching my 11-year-old HTML & CSS

Key Takeaways

hi I'm Chris and today we're going to be do some coding oh yeah all right so today I'm here with my son Chris how old are you uh 10 and three quarters almost 11. and after years of trying to get him to want to get into making websites or coding or something he's finally agreed to try and learn so today we're gonna see if I'm able to teach in an almost 11 year old how to write some CSS and so what we have on the screen right now is a very simple thing because other than learning to code he's also learning some magic tricks and one of the tricks is the whispering Queen he's going to teach us or he's going to write the instructions down on how to do it and then we're going to style it up and make the website look a little bit nicer um so we're going to do a little bit of HTML and then dive into the CSS HTML focus on that good question uh so HTML is what we see on the screen right now this code is HTML and CSS are both different languages that we write so it's like JavaScript javascript's another one HTML is called a markup language and you're telling the computer what everything is so you see here I have the body the body is everything that we see on the screen then we have um a header it's like a ukulele technically they have the body they have the head they have the neck oh yeah it's a little bit like that yes we're telling it the different pieces but we have to tell the computer what the different parts are so the header is like the title it's like your book cover almost or the book never done you know like the chat you get to a new chapter in a book and then there's like a page that just says the name of the chapter so here we have the header so this is sort of like the title of our page and that's what the H1 is heading one it heading one is your title does that make sense okay next we have the main what do you think the main is main idea that's where all the main content goes and then we also have a footer what do you think the footer is baseball so the footer sort of like the extra little piece at the end like the bottom like it's information that's related but it's not super important Dutch Football so we could put something in here and you're gonna guess what I'm gonna write a little bit here so the P stands for potato page poop paragraph paragraph paragraph what's a paragraph It's it it's it's if you let's say you have a book A book uh so you have the you have the sentences you cut the sentences in into paragraphs which is you cut the two a big at least four sentences and you separate them in two good so you know what a paragraph is okay so one thing I just realized I forgot to explain is in the HTML we have the regular text so let's learn what you need how to perform your tricks but then we have the tags so the tags are what tell the browser what's a browser if you know what a browser is title No a browser is not to do with the code what's what's like it's something Google Chrome Edge what do you use Netflix which which one of those do you use Google if you used Google or do you use that one yeah so those are your those are your um browsers so the code here is coming oh we're gonna save so control s is save you do it Ctrl and then s it so then we got see how what I wrote just came up here now so I think we should just delete the Kevin part and it'll be nicer thank you you're welcome so do you see how here we have the p and the P but on the page here we don't see the P we only see the the text that's in between because you have the thing here what's the thingy there they don't know what you're pointing at the triangle yes yes so yes so what's the triangle thing doing it's it's like if it was a walk if it's like if this was the your pee was in here and it was like a room it was like a box and closing it so you can't see it but it's actually helping out a lot so that's that the things that are inside those triangles are what are telling the browser like Microsoft Edge or Google Chrome so it's telling it this is what's the p the poop the page the page what was what was the H2 do you remember the H2 did I ever tell you yeah HD h-e-gm it is HTML but it's part it's sort of like the H1 is our main title this is like a secondary title exactly all right so when we're doing that we have paragraphs that we've just seen but we can also do other things than paragraphs so when you do yeah there's beautiful you want to know well I should be able to use tomato when we do CSS I'll show you that when we get there you know when you do projects at school and sometimes you have like points in your text and it'd be like a point and then there's a bit of things so you do a magic trick what are some of the things that you need I'm gonna do this one you're gonna do the second one cards so I'm gonna do UL you want to guess what UL means L is for list so using this so it's an unordered list yeah I know so we have an unordered list and then Li is a list item so here we need cards you said so let's save that and cards with the bullet what's something else we need if you're doing a card trick hopefully you have an audience I was let's say that I'm sorry and audience audience or a spectator yeah you only need one a spectator or audience I guess right a spectator or audience good um you need hands hands they're useful I bet you there's card tricks you can do without hands but yeah but they definitely are important all right so we have cards hands spectator I think that's enough now is the fun part is how to perform it now we have to do another list so you're going to do this list so do you know how to do the triangle bracket shift oh yeah this yeah so yeah that's the right one we want to do so we're going to do a different type of list instead of an on ordered list we're going to do an ordered list so if it's on ordered yet list is UL what do you think an ordered list is you ordered oh yeah so open do your triangle bracket o l oh we need the L2 oh just go inside and then put the L yeah and you go back in between the two of them push enter and now do it now we need an Li so put an Li in there actually you want to do the trick and I'll write them down Okay um all right so we're not finished the directions yet but I'm gonna hit save because I just want to show you something so far we have six steps and remember before we did the OLS and it was between the bullet points for unordered list with an ordered list see how we're getting the numbers coming up because it knows this is something that has to be done in order now on this last step we're saying tell the queen tells you to ask The Spectator to point to one of the piles but there's different options now right we could it depends on what the person does so I'm still inside this list item so see we have open and close so inside that list item I'm actually going to go in and make a new list so in here we have an unordered list and I'm going to do a list item as well but here we have the number six so where's the bullet points going to be the the dots after the six yeah no yeah so but see how they look a little different because this is like the point and then we're sort of giving like two different options based on what they did there why is that point like full like but these ones are like two like a Cheerio so that's a really good question the reason for that is because see how everything like we haven't done anything yet we haven't written any CSS yet and CSS is what makes the page look like it does but see how there is like here this the text at the top the text here is bigger than the text here which is bigger than the text here no we don't have any CSS yet border at the top we have nothing we haven't right now the only thing we have is the CSS that's not CSS that's coding let's not worry about that yet I was right so no but there's not this is the browser by itself put some styles on it we can change those so we can change this white circle or this black circle to look different but because these lists are inside this list it's making them look different that's just sort of one of the the defaults that the browser will do without you telling it to do that she's got a big brain thank you all right let's finish this off and then we can start writing some CSS all right so we finished writing our HTML we have all the different steps is there a problem not with the text is there just with this page yes what's the problem I don't like the background awesome yes yes I was hoping you'd say something like that because that means we get to do my favorite thing which is to write some CSS so CSS and HTML are different they're different you write them they're very different but very common are very linked together so when you want to DML coding linked cut Smoochy smooshy when we want to change what something looks like before we can change we have to say what we want to change what do you want to change so what do you want to do you said you want to change the background I want it what do you want to change the background of hmm I don't know would you want to change the background of the whole page some of the page I want you know what I want you know what I really want you know what so I think we should put it all red and then we put like um that color there of the Google dark gray so that color and we make it go like this like it's like the red is like on the sides like here but like it has like a thick bar like at least this stick so it goes like this big but it's on the side right on the sides and then that or these one of these two Grays okay so let's start simple and then we'll we'll do that okay perfect okay so first because we want red to be behind like red on the sides and red everywhere else we need to make the entire background red it'd be a lot easier to do that that's what I just said I know that but then you want the gray on top so looking at here we're starting here we have our header we have our main what's this it's your body so the body starts here and the body goes all the way and it stops all the way at the bottom so if we want to change the color of the body we have to well if we want the body the body would set the background for everything because everything is inside the body so we have to make a different body so does that make sense we have the body so we have to change the background color of the body so I'm see how I already made a CSS file here because I'm trying to speed things up a little bit so we're going to go in that file it's not going to work why well let's try let's try right body no triangle brackets just right body okay and now CSS is different because instead of triangle brackets we need curly braces okay can you do a curly brace this oh no that's a tilde it is a curling so body space after the body put a space and then put shift your right shift everything's a shift so hold shift ing yep but we want the other one that's this one perfect and then push enter yeah it's no it's perfect it it might it does it on purpose to make it a bit faster and then hit enter now right background so guess what I would instead oh yeah let's put right what type of red just put red it depends on what type of let's put red and we'll see what it looks like and then at the so we're saying we're choosing the body so the red B red let's make this a bit bigger so this this here is our selector it's called that because we're selecting our body but here's our body body so we're selecting our body we're selecting our body bye and then we're saying that we want the body's background to be red so we're going to save it but remember I said nothing's gonna happen yeah nothing happened the reason why nothing happened is we have to go back here back there we have our HTML here we have our CSS here we have to do I we have to connect them nice you think we planned this but we didn't I never told you that I'm impressed so to link them cool yay Link from Zelda in this link style sheet and now you do it control S I think that's nice I know you have a red background that's a very ugly red okay so go back to the CSS file now yeah go to the no don't click there click here or yeah click there delete red remember I told you you could use tomato tomato right tomato hit save now it's nicer than the other one I don't want that to Red that's okay so now you know now if you want click where like the red is yeah and then you can choose a different color so the background's not bad but it's hard to read Perfecto I'll be you wanted to put a gray background on the rest of it okay so we'll leave that for now uh one thing that we could do is make we can also move this so it looks better in the gray background yeah come back to the HTML file so the we're missing something now to do what you wanted to add the gray background we have to we're gonna have to add it so right after body push enter opening open the triangle brackets again squiggle your triangle triangle we're in HTML so that's triangle bracket World boom and we're gonna write div which is div so div stands for division it's sort of like making a box I suck at the vision and you're in right class now c-l-a-s-s class is equal to is nope put an equal sign and then let's give it a name no give it a name you choose the name it's gonna have the gray background on it though wait no no why did I agree to do this video it's perfect so the problem now is we have div open and then div clothes we want to give all of that the gray background though right so let's take the take the clothes take your mouse and select it okay so we're gonna cut it from here now where do you think that that would if we're starting our gray background here now if where's the gray background gonna end at the corner no I mean like what what we're starting it here and we're going so the header is going to be inside of it our title do we want to end it the gray background only at the top or is it going to go all ever have everything in it I want it to be like this no don't I'm just talking about don't worry about the sides just look up and down right now where's the bottom of the gray background gonna be the ball that's a great background would be there okay so where do you think we need to close that div then here is it starting here so in on the HTML side how do we do that so is it closed after the header no okay so keep going down yes what am I doing okay so we you have to tell it where the gray background is going to end oh wait what so if I do it here would end here so no so here if you did it say say we did after the header then it would be only the title that would be in there HTML no so do we want the footer in there too yes the footer is the Page by Kevin and Christopher uh-huh okay so right after the footer then perfect and then I'll we'll close the div there so now we don't actually see anything change on the screen because this is behind a div by itself doesn't actually do anything yet we have to go no it's all fine there go now we go back to our CSS feel and we have to choose that div so click push return now we have to choose what did you call it what was the name you gave it my dad's big button so it's kind of weird but because it's a class we're gonna start remember we did class equals so we're going to start with a period okay and then you're gonna do [Music] wait does that finish you didn't put an S on the other one oh I gotta change it let me go back to the CSS again so keep going my dad's big now how do we what do we need to do next to start actually changing stuff what what do we need to do now see we've we've selected it we've chosen what we want to change the squiggly line go for it and now what do you want to change the new one you want to make it gray so what do you think you need to do okay Gray background gray go for it is so you can cheat here no I'm not cheating I would cheat [Music] concrete gray do you know how to do a hashtag this no shift here yeah do a hashtag and I put three three yeah there you go a lighter lighter than that okay you choose the color you want all right yeah it's kind of hard to read the black on the gray so let's change the color of the the text too green green I'm joking oh my goodness okay so push enter tomato push enter now to change the color of the text what do you think we have to write change color of the texture it's interesting it's just color it's one of those weird CSS things so you choose one of those ones it'll be a bit Aquarium why don't we change the font the font but this yeah like so come here on the body and Let's do let's change the font because I don't like that font hey I know it's your page font family so font family is choose choose one of the font choose just choose Times New Roman new all right now you said you wanted the red to be like more on the sides right yeah like a pretty like thick at least like this big okay so we're gonna come inside of this the one that we made here let's make a new line again so you can push enter and what do you think you'd do to control how wide it is it's always one word wide thick man great width width yes no if it's Stickman I have to write you wide width I mean w i d t h there it's at the top you just hit enter when you see it there if you want or click on it now we have to choose no don't use Auto it won't do anything we have to choose how big we're gonna make it so I'm just gonna say let's put in you know let's try 750 pixels so write 750. 50 and put PX oh pixels like XP will be switched hit save how's that for the width oh more hair but we want it in the middle right more yeah so now this is a bit of a weird one but it's called margin what's a margin it's um the tax and the size of the sides of the page exactly so that we want to sort of set what that margin is going to be now actually we're going to say margin left I saw that sorry because that's gonna be on the left and we're gonna do the margin right and there's a magic trick we can do with our margins because you could come in this and we could try and guess what it's going to be so I could guess it's guess who we could guess it's like 20 pixels and hit save and you go oh that's not enough maybe it's actually 100 100 and then you save and it's still not enough or instead of trying to guess instead give me nine instead of trying to guess right Auto so hit save now did it do it try it again safe oh my goodness it went all the way that way you suck what it's doing is it's saying we're gonna take all the empty space and put it there but we don't want it all on that side we want it both still correct so if margin left is Auto and it pushes it that way in the middle margin middle margin put that a lot of people wish there was a margin middle or a margin Center but instead of that we can say margin left Auto and margin right Auto and if you do both of them as Auto then it goes right in the middle that's perfectly in the middle even if it gets bigger or smaller it always stays in the middle whereas if we said that it's a certain size then it wouldn't work so margin left margin Rate Auto means okay here audience goes wow wow there we go okay so we're gonna fix one more thing we're gonna do two more things actually first we're gonna still on this one here we've set up we've set the margins one thing that's kind of margins are on the outside of something where's the margins in this on the outside so when we have the box here that we made and we did the margins the margins are on the outside of it sometimes it's nice to have extra space on the inside too so to add space on the inside we have something called padding so why don't you try giving a number you can't use Auto here give it a what number do you want to try we'll do pixels again favorite number that's when I can leave this house so see how by putting the 18 pixels of padding there it's giving it let's just take that off so say we delete it and everything's stuck to the side of the box and then when we put it back when we put it back and I save now there's the space around so it makes it a little bit easier to read does that make sense yeah so which one's on the outside imagine and which one's on the inside the padding good thank you now so far we've done we've chosen our body and we've chosen this one let's say you wanted to change just the color of the text on these titles do you think you could figure out how to do that yeah go up okay so when I wrote body it's choosing that when we when we wrote the when you wrote my dad's big butt it was choosing this big black so now if I want to select what you need what is what you need inside of look here what's what you need inside of the h 2 awesome so we need to select yes us now so on go down to line 16. 16. [Music] click more and what do we need to write h D good and next space triangle bracket we're in CSS world it's perfect [Music] okay and what do you want to change the uh what do you need nope we've already look at what we've already done what are we changing what do we want to change about it I should say color the color so how color and did it change oh it's nice did it change and do you notice not only this one change but that one too because that's in the H2 that's awesome yeah that's another HQ is there anything else we want to change before we wrap it up I think I want to change Jeep figure out how to do it let's see if you can do it without my help so where's the title oh I said I'm not gonna say anything sorry duct tape uh we always start at the bottom don't worry about this stuff buddy uh let's learn how to do it yeah H1 go teen space no enter we go yeah shift thingy okay squiggly line what's that called squiggly braids squiggly bracket one call it bracket color no it's not showing us different colors we can use because it's a little confused right now why do you think it doesn't know what it wants to do because it doesn't know what color because what are we changing the color of HD one where is it and you put it I'm an idiot almost here I'll try that now if you take the colon off and then put it back you said you're not telling me anything I just wanted to tell you how to get the list of stuff again go down let's go and awesome yes let's go I like that that's nice it's nice came and asked you do one more thing I'm going to change the background of our footer what's the fire uh this scroll all the way at the bottom a page by Christopher and Kevin that's the footer so go to the HTML scroll down so we can find the footer I think I found the footer okay so how would we change the background of the footer no pleasure well so we have to go what file do we need to be in in each in the further the page we can we can choose the footer itself too anything that's inside the triangle brackets you can select in CSS HTML yes here we're looking at it so now if we want to change the color where do we have to go we have to go to our CSS right because that's what so it's called footer v o f o p e r good I have a good memory belly let me go into I'm weird okay so let's save that I like the consistency of your color scheme I must say oh absolutely now we have to go into wait before you go to HTML I have a challenge for you stay where you were so one of the reasons I think it looks ugly is because it's out not in because it's small not big so it needs a bit of space around yeah right so you remember we looked at two things they could add space challenge there's two things that can add space there was one that adds space on the outside and one that adds space on the inside so see if you can figure out what adds space to the inside it may it made this this become the color it became the width the wide the width we wanted it added a little bit of space in the middle right so why don't we try doing that on our footer Patty yeah yeah so let's do 50 six wait I'm gonna yeah yeah make sure you put PX and then no space after the 56 56 PX has to be all together so let's hit save and see what that does might be a little surprised to go look in the page sick boy so remember the padding is adding space on the inside so writing 56 here 50 60 or 56 there it adds a bit more top and bottom we won't worry about why but I have to dry it bruh how long does this go for it's a long time I can see that I'm up oh I have the biggest fan I do like the experimentation though foreign s about writing CSS pretty fun pretty fun for real yeah yeah it's hard but it's I like these things you learn anything no no I'm gonna forget it do you think you'll try again maybe in another video another video is there another challenge how to do CSS bye junior mini Kevin Powell and so there we have it I hope you enjoyed that video and me trying to help my son learn a little bit of HTML and CSS if you did enjoy it please let me know down in the comments maybe we'll do a follow-up I'm not too sure yet uh if I have the patience for it but maybe we'll do it and with that I'd like to say a very big thank you to my enablers of awesome Jan Johnny Kyle Mr Dave Patrick Simon Stephen and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your record on the internet just a little bit more awesome