 Hi everyone, welcome to the HNML and CSS course by Hacker School. So first of all, I just want to welcome all of you to, if you'd like to move closer and move together inwards. So that way, if you have questions or any problems, you can go to your neighbors left and right and just ask, right? But if you guys don't want to move, we have two helpers who are walking around, with your hands. So the two of them will be around to help out with any questions or difficulties that you encounter. So a short introduction. My name is Kai and I've been doing this roughly two or three times. So hopefully this time I'm getting better. Yeah, yes. So you can access the slides on slides.lik.ai. So that way you can follow along and jump around the slides if you want. Yep, pretty easy to remember. Just give a couple seconds and then one here still needs this slide. Nobody? All right. So what is HTML and CSS? So they sound very intimidating to me when I first started, when I heard like, oh, HTML, CSS, acronyms, right? But HTML stands for hypertext markup language and CSS stands for cascading style sheets. It still feels very complicated. But when you start writing, you start to wonder why they have even such complicated names to begin with. So why do you want to learn HTML and CSS? So for me, the primary reason is, well, it's used to build web pages and you can share your creation with the world. Whatever you build, you can share it to anyone across the world. A person in Antarctica might be able to look at your website, even though you're sitting here in the sweaty hot sun in Singapore. So yeah, HTML and CSS to me is like an endless canvas where you can just do whatever you want, whenever you want, as long as you know how to do it. And I guess that's why most of you are here. So what are we going to make today? It's going to start from beginner steps, right? We're going to build a personal portfolio that when you build it, you can share it with friends and family members. And, you know, you can even show it to potential employers in the future, right? They will be impressed, like, oh, you have a personal webpage? That's kind of rare nowadays, right? So this personal webpage portfolio is going to look a bit like this. So it's going to look very clean and sleek. And then you have a few links at the bottom. Then we're going to add something a bit cute, I guess. We're going to try to get a cat image. We can get a cat image. Why not, right? So to start off with what you will need is two very simple things. You can choose between either one of them. If you're advanced, you kind of know your way around coding. You can choose a later option. But I'll be going with raffle.it, which is simply put, like, a server owned by someone else that you can play around with. So there's no setup involved. There's not, there's no installation. It's all on the web. So what you can do is just click on it. If you don't have the slides, this is slides.lik.ai. There's a slide number, quite sure. Let me find it out. Two, three, four. Slide number six, I guess. Yep. So when we write code, when you write HTML and CSS, it's something that a computer has to understand. So when you write code, you have to be precise. What I mean is, if you miss, like, squiggly, like when you write code and maybe you see, like, a squiggly line below, it probably means that, you know, a computer doesn't understand you. And it could include stuff like empty spaces, extra slashes, extra codes. Then the computer won't be able to understand what you're writing. Then you won't get the result that you want. So if you encounter this sort of cases where you were seeing something and now you're getting a blank screen, that probably means that the computer doesn't understand you and has crashed. Yeah, right. The HTML is now blank. But the parts that are content, meaning things like who you are, the links, the images, all those are free from content that you can write whatever you want. You don't have to follow me. Your name is not Kai, right? So you don't have to copy it exactly as I do. Yeah, that's where you get freedom to play around. So every single webpage, when you go to, say, google.com, when you type it into the address, it does some lookup. But eventually what you do is you download index.html to your web browser like Chrome, Safari. And your browser will ask, hey, can I have index.html? And somewhere, somewhere around the world, there will be a server, a single computer responding back and saying, yeah, here you go. Here's index.html. And your browser will receive it. And now it can display it to you. And that's how HTML works, is how web pages work in general. This is a bit simplified, but this is all you have to do in your mental model about how index.html works, right? So to start off with, index.html is written using HTML. So every single HTML would have HTML text. And one thing to understand about HTML text is you have to open and close them, right? So you have to open and close them. You have to open and close them, simple enough, right? You open a button, you have to close a button. You have to open a HTML, you have to close a HTML, right? Aside from these two very commonly used edge cases, either an image or an input, these are known as self-closing HTML text. Then you just have a single slash at the back. So the most common two HTML text you will see is the head and body. And I like to think of it as a person, right? Your head describes certain metadata, tells how the person to move and what to move. But when it comes to doing the actual moving, it's a body that's doing all the actions. So body contains all of the visual content that you as a user see, but the head is invisible, right? Unless you really dig into it, it's not shown to the user. So this is the most basic HTML page you can have, where it starts off with a dog type at a start, which tells the browser that this is indeed a HTML file. Then you have a HTML tag opening. Within it, you have a HTML tag opening containing a title tag portfolio. This portfolio is content that you're free to change. And within the body, it says, hi, I'm Kai. That's also content which you're free to change. So if we go to the repo.it, this is what you should see, right? So in general, how this works is on the left, you have your file browser that you can see that there are two files in one folder. So what you're looking at is index.html file. Then at the center, at the very top, you have run. And when you click run, you should see hi, I'm blank, right? That's where you get to change things. So if you change it, if you change it and click run again, yep, you're getting hi, I'm Kai. If you click this button that says open in a new tab, what you get is your web page in a new tab. And you see that the title that you put in, right, it appears on a new tab, tab content. So it says portfolio. If you change it to something else, you display something else. Everyone following? Cool. Okay. So how do we start to add more content? So on a web, it used to be more or less a document format, which means it used to follow a lot of what newspapers and printing industries used to follow. So we have headings. And the headings are ranging from page one, which means the most important heading in a document to page six, which means not that important. So it is generally a good practice to only have a single H1 tag in your web page. But H2 to H6, you can have as many as you want, right? So let's add a heading tag. You see that I made a mistake. So let's fix this. And we click run. You should now see that your heading has become big and bold. And now I add another line, a H2. And now it looks different. Now I have more content. But in this case, you will notice that H2 looks smaller. And that's intended. This is how browsers will display most of your web pages. If you go to like NewYorkTimes.com, you see that giant heading? That's probably a H1 underneath. Okay. So how do we add images? Like I mentioned, image is a self-closing tag. And in general, what you want to do is within the self-closing tag, you have attributes, right? So we have a SRC attribute, which is a shorthand for source, which you provide a link to an image, which the browser will then download and display it. Then your ALT attribute, which stands for out or alternative, is where you place a description of your image. So this is used for people who have like some mental, not mental, sorry, visual disability, right? They will be unable to view your image due to maybe they're blind. In that case, and your alternative description will be displayed to them instead. So let's add an image. So I have already included an image in a photo structure. As you can see, it's under image folder. And I call it building.jpeg. So what we're going to do is just add it here. And if you click run, you should see an image that is very, very big, like way too big, but it's fine. We're going to add styling later on to make this prettier. But in general, this is what you should see. Even this, all right, I'll increase the spawn size. Again, if you guys encounter any problems, we have help us around. So just raise your hands and they'll come to you to help you. Sorry, you mean this website link? Yeah, you can find it on page six of the slides and click on a raffle.it icon. Slides, the link is here slides.lik.ai. Yeah, the slides are available at slides.lik.ai. For those who are faster, maybe you would want to find a nice image that you would like to put and replace it. All right, I'll try to move on. If you still have any questions, just feel free to raise your hands anytime. So the next step we're trying to do is we're just going to add like tiny little boxes around our content. And what all these content containers are going to do is they're going to encapsulate or rather like box up the content that we want so that when we try to style them later on or when we try to move them around, they are easy. It's not so complicated. And there is a good idea of the division between things. So the two containers I'm going to add is a header, a hash group, and a div. Okay, actually it's more than two. Hader, hash group, div, and main. So some of these are quite intuitive. Like main tag stands for the main content and the header tag stands for the header. The more confusing ones would be hash group, which is used to contain a group of heading tags. And what you will more commonly see around the web when you open up web pages is the div tag. So div stands for divider. And it's used for separating out content everywhere. If you run out of options and you don't have a good idea of what HTML tag to use, div is probably the one that you should fall back on. Yep, so let's try to add containers. If you're lazy like me, you can copy. Right, raffle.it also comes with a very convenient auto format function. Just right here, one tiny button at the top and you can press it to make your HTML look easier to look at. So you'll see that in my body tag I have a header tag, I have a hash group tag, in which I have a hash1 tag, h2 tag. Now if you run it, you shouldn't see any changes to your HTML file because what we just did is just to wrap the containers around and they shouldn't add any new content or change the layout. Yep, I think if you're looking to the slides, I think there are a few mistakes. One is in a hash group here, there should be a forward. This should be an ending hash group tag. So it should have a slash right here at the start. And similarly for this, that should also be a slash at the start of this one, this ending tag. So we have a general structure of a webpage that you are able to show your friends and family already, but we want to add more content and more structure to our HTML page. And one very common use case is to add lists of things. Like maybe you're trying to do like a checklist or to-do list, maybe just listing some ingredients for a recipe, stuff like that. That's where you would normally use lists. So HTML does come with lists and they come in two variants. You have your ordered list, which means that things are going to be comfortable in, I guess, one, two, three, four, five, six kind of steps. So it's called an ordered list, but ordered list is really along the type. So programmers shorten it to OL and list items is shortened to LI. So the second variant of list is called the unordered list, which is why it's shortened to UL. So let's try to add lists to our HTML page and we're going to add it under mean, going to add, I know, OL tag, then we're going to add some list items. You can add as many list items as you like. Doesn't have to be two, you can add more. So we added an ordered list. So if you scroll all the way down, you'd see a list with one dot something, two dot something. And if you add more, the numbers should appear. Now we just added an unordered list. So if you display it, what it should get you is dotted, bulleted lists, I guess, and that's how you add lists. If you want to style the numbers and style the bullets, this is not very easy. Yeah. So just nothing you know beforehand. So we've added lists and we kind of told visitors to follow us at Instagram and Twitter and all our social media platforms. But it's kind of hard for them to actually do so because we haven't added any links to the social media platforms. Right. So the next step, we're going to be adding links on a web is referred to as anchor links. And we see that anchor links have different meanings because when you're trying to anchor something, it usually means, well, you're going to lead to somewhere else. So anchor links are shortened to A, the single character HTML tag, which is quite weird. And it has one attribute called href, which stands for hyperlink reference. And that's where you put in the link that you want to put inside the href tag, sorry, inside the href attribute. And when users click on that link, you'll lead them to wherever href points to. So just clarifying the content inside href is content. You can replace it with anything you like. Right. So in here, we've added one href, which goes to Instagram. We've added a second one that goes to Twitter. So now you'll see that the links are slightly different. Right. The links have blue or blue or purple and have an underlying. So this is because links in HTML originally didn't have any styling. So this were the default stylings that it came with. And unfortunately, the people who invented web pages, when thinking of making things look very pretty or beautiful yet. So we have purple color for visited links and blue color for unvisited links. So again, I just want to emphasize, please change the links. They are used for demonstration purposes. So for those who weren't here just now, I sort of demonstrated the final HTML form that the HTML page that we're making. And I included a form where you can submit to get a picture of a cat. So the next step we're going to do is to add a form to retrieve pictures of cats. So how do we add a form? So form starts with a form HTML tag. And inside there we have labels, input and buttons. So inputs are used for interactive content. That's where people can start adding their own interactions, their own input, like their name. Then you can use that input to do interesting stuff. So what input we're adding here is a number input. So users are encouraged to add a number. So when they fill up the number and they click submit, they are getting an image of a cat corresponding to how many pixels white it is. So you put in one pixel, you're going to get one pixel cat. And you put in 2000, you're going to get an image of a cat 2000 pixels white. So of course every form needs to have a submit button. Or else the form doesn't really work. So that's why we're adding a button HTML tag there that says submit. So let's try adding this form to our HTML. So this form goes at the end of the main content. And we want to put it at the end. So in general what we call content at the bottom of our webpage is a footer. And that's what we're going to add. So the form goes here and we have an action attribute. So we've added a form and inside the form there is going to be an input and a label. So an input and a label usually comes together. The label is used to describe what the input is for. And here we are adding a label cut width to our input which is also cut width. So the name attribute here must correspond with the full attribute in the label. And that's how the computer can help people with visual disabilities to identify which forms correspond to which. Then we're going to add our submit button. So let's click run. And at the bottom of the page you should see this input where you can type in numbers. And a submit button where you can click on it. And you should get a picture of a cat. All right anyone here not getting a picture of a cat? If you're not getting a picture of a cat it probably means you've typed something wrong. So a good way to fix it would be to copy it from the slides I guess. If you want to get back your original index.html you have to refresh. What we did was redirect. So same thing if you went to like the Twitter tag Twitter image then you have to refresh. For those of you wondering what this two attributes doing in the form HTML tag is doing. This goes a bit beyond the current understanding of how a web page works. So in general I would just like to encourage you to just take it as it is for now. If you're interested there are like further readings where you can read up on how the form tag works what additional attributes are in there and what else you can do with it. Okay so now we have a HTML web page that looks quite reasonable. A little sort of weird layout where you have this giant image in between. So now we're going to add styles and this is where things are going to get a lot prettier and this is where more or less your creativity will come in where you can play around with different sorts of stylings and different kinds of background colors different kind of text colors different types of fonts and stuff like that right CSS is what I would like to call as fun because there's so many ways that you can play around with but people tend to get frustrated because they don't have the mastery around CSS so tend to get frustrated. So how does a CSS come into play right? So I previously mentioned a HTML file and a CSS file so when a browser has received the index.html file the server sends it to your browser right then when your browser is reading through index.html it will find a need to go fetch an additional file called style.css and then the server will send the CSS file then it will read it then add it to your HTML file then display it to the user. So there are going to be I'm not sure if all of you have encountered this but you've went to a web page you know it starts loading and it's really ugly then it just stops there and it's not the usual site that you're used to it's stopped very differently that's probably because the style.css file got lost along the way or there was a bug with the CSS file so it wasn't displaying correctly so CSS is in charge of all the displaying the styling beautification of your site so how do we add a CSS file? The answer is in the head because the head like I mentioned just now contains metadata it doesn't actually contain any content that the user will see so we're going to add this link HTML tag which contains a reL attribute I'm not quite sure what that stands for but it probably means like what the link contains and again a href attribute which stands for hyperlink reference that's where we're going to point to our style.css file and have the browser go and fetch it for us so back to rebel.it so our head only has a title let's add a link right so you shouldn't see anything change and that's because our style.css file is currently empty right so you should try to double check if that with what you wrote corresponds to what I wrote so web pages were invented in the 1980s so that's quite a long time ago right so along the way we use a browser to display html and css files and along the way there has been a lot of crap around css and html so browsers tend to differ between themselves on how to display a normal web page and the rules tend to differ slightly so if you go to chrome and open this same website or go to firefox safari android right your web page would look slightly different in some ways and that's usually not what we want like if you have a user who's using some very unknown browser suddenly it would look very very different and that's not what we want so the community around css has come together and build a generalized solution and we call it a normalized.css and this normalization tends to smooth out all the rough edges around all the browser differences and it they can come in different names so the few are normalized.css reboot.css among other things but those are the two most common ones anyone of you anyone here have heard of bootstrap bootstrap no well okay uh so bootstrap is a very commonly used css solution to building giant web pages and it tends to lead to like a normalization of styling between web pages and that's why you see like oh this looks very familiar to the other side well they're probably using the same bootstrap css so that's what we're going to do we're going to add another style sheet but this time instead we're going to get it from bootstrap and we're going to get bootstrap reboot css file so this has a very long name i'm sorry but there's no way around it so you just gotta like copy this link it's what i would recommend and just paste it right now this time if you look closely at the font it's going to look different right so from a serif font we went from a serif to a sans serif font so there's no like weird curly edges now it's blocky it's modern and your summit button would look a bit different as well so it's probably not as rounded as before i'm not sure about you guys but i generally like my web pages to look a bit more cleaner and i like my fonts to look different from what everyone else is using so i tend to like move away from a real you know herbatica those sort of usual choices so i like to add fonts and fonts tend to make very big differences in web pages and it's a good way to like you place yourself and make yourself unique so let's try to add fonts and the font we're going to use comes from google fonts which provides fonts for free there is probably like some privacy concern because every time you go and download fonts google knows what fonts you're downloading and they can probably like track you based on what fonts you've downloaded from them before and stuff like that but it's free fonts right if you want to purchase your own they normally cost can cost from like a hundred dollars per hundred thousand page views to like tens and thousands of dollars for every million page views which is really steep so google fonts looks like this and you can like play around with it to find like fonts that you like it's generally very powerful but these are like the common fonts that people download you can play around you can select say you would like railway and you can add them and google will provide instructions on how you can export this to your html page right you can dig into this later we're just going to follow what i have which is we're going to add a monsetra font and an open suns font so these two normally work to get the quite well and they look quite good so again we're just going to copy this entire line and drop it in again you shouldn't see anything change yet because we haven't added anything to our style.css so we are going to add style sliton that tells the browser how to display the fonts that we like but we'll dig into it shortly all right so it's approaching an hour so just a general question does anyone here prefer a break of about five minutes before we continue all right all right since like there's agreement so we'll take a five minutes break and come back at 2 p.m. for those who are born I guess and I have questions to ask you can you know go to slido.com with 9874 and ask questions I think there's a registration link so can you change it to what it's just dash so what is exactly the point of dropping the bootstrap link so the bootstrap link that we dropped just now it's called the bootstrap reboot and it comes with a set of resetting CSS starlings that tend to normalize like browser differences and it's in a few good defaults by born starling and stuff if you're curious you can look it up like bootstrap reboot is your google it goes to your website because we haven't added styles and changed your fonts yeah we only added the fonts here that was a previous CSS you remember the bootstrap reboot thing that we added that's what changed the fonts where do you click on this so you can go back to the report item could you refresh I don't know it shouldn't now it can click it might have been bugged on their side yeah so when you're at it when you edit something supposed to create a new belonging to you but I think the link wasn't updated yeah you can change it yeah I'm just like using this as a default for everyone else yeah because you know picking your own fonts take like a long time okay the next question is interesting questions so how do you put a picture found on google in a website so the web pages have a long history of how it works and basically whenever you download something it consumes other people's resources so that's why when you try to directly copy a link to a google to like an external site it won't work because serving images consume a lot of cpu resources so web pages generally don't allow you to do that instead what you should do is right click save to computer upload it to your own folder then that way you can host your own images and how to insert comments in the code so comments in html starts with an exclamation mark at a very start so open tag exclamation mark dash dash type in your comment and you end it with dash dash ending anchor demonstrated so this is how you add a comment to html how to add js or php in uh so if you're interested in adding javascript code you can edit uh we will have future courses that dig into how javascript works then you can explore if you want to get started ahead you can go look up script html text and that's how you add javascript can you explain each section of the form again okay sure right so going back and explaining the forms again to people who weren't following uh we have a footer tag so this is a content container this doesn't really do anything to a form the part actual parts of the form is there's few lines right so you have an opening form html tag and an ending form html tag and you have a label and input that comes together as a pair the label describes what the input is doing and the input does the interactive part where you can type in stuff or drag sliders and click buttons then you have your actual submit button to submit the form and this is how it works if you require additional clarification i added a further reading link at the bottom of every single slide so if you're interested in not sure what's uh additional information that you need you can go click on it and read out okay so let's get back to the content so just now we downloaded style.css file but we haven't added any styling so we're going to add some css now this is just to test if you know the css works so what this is is we're telling the browser to display our body html tag with a background that is teal color so this time instead of editing index.html we're going to edit style.css so like html tags you also have an opening and closing but the opening and closing is this braces if you're not sure where to find the keys it's right before your backspace like around that region before right below your equal key and you have to press shift so if you run this your background should change nope yep okay so i think i made a mistake let's try this okay right never mind forget what i just said uh we're not changing your background to teal because well even i got css wrong so that's frustrating uh yeah so i think there is a bug in this style but it's okay because we're going to throw it away and add fonts after all so this time i'll assure you that this works okay because i just tried it so what we're doing here is we're adding a font family to the body the body of the html file and for all the headings like h1 to h6 we're going to use a different font family and we're going to use a different font weight so font weights range from like 100 to 900 in general and as you go up higher and higher the ticker and bolder your font will be so 800 is pretty bold okay never mind okay i just debunked and i know what the problem is so how it works in css is that every subsequent css overrides the css at at the very top so what we just did was modify css at the very top that bootstrap will override for us so that's why nothing is changing so if you move this line down here okay yay yay we made the background teal color after five minutes so by adding this new styles your font should look slightly different okay so just now we edited some css properties and those css properties correspond to html tags like body or head but we're just trying to amend it such that we can use it in other places as well so i'll cover how classes are reusable in the future but for now we're going to introduce the concept of a css class so a class is added to a html tag as an attribute so here we're adding the intro class to our header html tag then in our style.css we're going to say make the intro class have a height of 50 percent so let's do this too so nothing has changed yet because we haven't added the class to our html so this is a very basic css class and now we're going to dig into the more complicated aspects of flexbox so flexbox is a css property that defines how we lay out elements in our html so it all starts with this property called display flex and it tells the browser that we want to initiate a flexbox then additional properties like flex direction justify content align items align content tells how the browser to lay out the content in the flexbox so in my further reading links there is this website called flexboxfroggy.com that you can play and learn flexbox so it's like oh you need to get the frog onto the lily pad and a way to do this is you know flex justify content flex and yeah and we move the froggy from the left to the right and now we have to move the green froggy onto the green lily pad and the yellow froggy to the yellow lily pad and we use justify content center to do this so you can keep playing around with all these various flexbox starlings and attributes i'm not going to cover all of them but this is a very fun exercise and a really good way to learn if you're interested i have i should have additional links but if you're not you can look up flexbox playground and this is a site that i go to quite regularly to visualize like all the different things like you have flex different flex align items properties it's like align items start and center baseline stretch you have your justify content like i mentioned just now you have center space around space between flex and flex star and in general a lot of properties to play around with to understand and visualize what they do and how they change things so what we expect here in this intro hater class is it's going to center our content so let's add that in to our star.css and add the intro hater class to our intro hater over here at the h group so class equals to intro dash hater okay and now we're going to add a few additional properties to add spacing around our elements so spacing is used to make your elements feel less stuffy and give them a bit more room to bridge so one very common attribute that i like to use it's called the padding and padding used used to give like additional space between elements and the unit that is quite common is rem which stands for some value in a browser where one ram stands for the default font size set on the html so let's add padding left for now just this property and what we should expect is the hater should move slightly right because we've added padding to the left of it so if you notice we have some padding here that is white space and we move the container around if you change this from 1.5 to 2 you'll move even more so seven ram looks like that then let's add the container so the padding shorthand is a easy way to define paddings for all the four directions so up down left right so instead of writing padding left padding right padding top padding top padding bottom you write padding 1.5 ram then when you add it to the div you should see that the div has padding all around it right now we see that the image has changed slightly there's this additional white space over here and similarly at the bottom there is also some padding so there is a very good way to remember the padding shorthand which is it goes clockwise so up like starting from 12 o'clock it's up then going clockwise it's three o'clock six nine so it's to your direction it should look like this right so like this so up and if we change it such that the top is the sorry the left and right is like eight ram then you should see that the top is top and bottom it should be 1.5 the left and right is eight now if we add another one now it should point to the bottom so your bottom now has like seven ram we're just going to keep it to all four directions so we're going to dig into the very very technical parts of css and html it's okay if you don't fully understand what's going on now because for me it took me a while to understand this so what we have here is like three layers the margin border and padding and this is what is used to describe the box model and at the center we have our content which i call it lauren it's some so for you guys it would be like hi i'm blah blah blah that would be your content box and a padding box which is what we added just now is to add some padding and the border box which we are not going to cover today but border like an image frame basically adds like a take border around your image and box then we have margin which is outside of the border and a margin interacts differently compared to the padding which i won't go into as well but a margin is a different way to separate your content because it is outside of your box rather than the inside so it tends to interact differently so for those of you who have this slide open this is actually interactive so if you drag this the margin should drop to zero and this is one two three they can like try to imagine how the box model works so if you guys encounter any difficulties in the future and you're frustrated like why isn't this laying out the way i want it to it is a good idea to review your box model and try to understand how it interacts with other boxes around okay so i know it's very frustrating to have like this giant big blue image staring right at you and that's because we haven't added any styling to style images so by default if you don't add any styling your image will be as big as it is so if it is like 15 000 pixels it's going to be 15 000 pixels across all browsers and that's not what we want like if you view this on a mobile phone 15 000 pixels is a lot so what we're going to do is add a plus called intro dash image and we're going to use this object fit css property so in the further readings it goes into a bit more like how object fit works so the one we use is object fit cover which means like if it goes beyond the range of its width and height it will be cropped if you want it to be within the box but have like white space to the left and right or top and bottom then you can use contain or can use feel to like stretch it out and like none which does certain different things and scale down where it's quite similar to contain so we're going to use object fit cover and we're going to make our box height and width 100% which means it will be constrained by our browser view point so if our browser is very wide it can be very wide but if our browser is very tiny it will be only as tiny as the screen so back to style.css intro dash image it's going to add it into our image tag right here so class so if you've done this correctly our image is no longer gigantic it is only as big as our browser right so our webpage looks pretty good now it's no longer as as sudden as before where you're presented with a giant image you guys can feel free to play around with the other object fit properties okay so classes like I mentioned before can be reused and that's the power of CSS classes and in general why we tend to write all of our CSS styles in classes instead of the body hdml h1 h2 h3 text so by reuse it sort of reduces the amount of work that we have to do because we can simply apply styles repeatedly to the common elements that we want so we can try to imagine like if you have list items like maybe seven or eight of them don't have to write individual repeated styles for all of the list items we already have the container CSS class so it's pretty simple we just have to add it to our main hdml tag and our footer hdml tag by doing so you should see that your main content which means like the I know something something something as well as the form at the bottom like get a cat it should have some padding around it okay so the webpage has come a long way since it's 1980s root especially CSS because when hdml was invented mobile phones weren't a thing yet and people weren't in general thinking that we would have content that could be handheld and fit within your palm so the webpage was never designed to be read or used on a very small screen and that's why the very very old web pages if you visit them it will look very weird and you probably have to scroll around so the modern web page is responsive and what responsive means is it is responsive to all the different browser widths across the world so if you have a tiny Nokia phone or a tablet a laptop or maybe a tv screen your webpage would look great across all the different screen sizes and how we achieve that is through this property called media query so media query is a way to define and change CSS depending on how wide or how tiny the screen is so what we see here is if the screen exceeds 1920 pixels the CSS is going to be changed it's going to be applied to our CSS so instead of the usual intro left 1.5 REM we're going to say let's change it such as the padding left is 10% of the screen width so the way to do this is you can add this in anywhere and in fact if you want you can change the amount of pixels this triggers as well as the amount of padding that you want and now we're going to add a new CSS class so remember that class was called intro dash left and we're going to add it to our h group html tag so up to now our CSS classes has always been singular we haven't had applying multiple CSS classes so in a class html tag attribute you can actually add more than one CSS class so let's add intro dash left here and press run so the webpage should still look the same on smaller screen sizes but if you expand it i'm actually not sure if my screen is wide enough now can we change it so let's pick a smaller number because my screen is too small yep so if you take a look at the heading the high aim something something it triggers at a certain break point when exit 768 pixels the CSS class gets applied so instead of padding left 1.5 REM it goes to padding left 10% so it should look something like that so bring back up media queries it is generally a good practice to add quite a few media queries to be applied on mobile phones slightly bigger mobile phones than tablets laptop screens and desktop screens so those numbers would be something like 768 for mobile screens and below um 1024 for tablets then 1376 for laptops and 1920 for desktop screens so those are numbers that you'll probably be familiar with okay so i mentioned 568 uh 576 pixels so this means that on mobile screens it's going to remain the same but if it's above a media screen it's larger than a mobile phone we're going to apply these three CSS classes so we have our original intro display flex but we're going to add a height attribute the limit is height to 80 REM and we're going to change our intro left so that it does more things it's now it's going to expand as much as possible and instead of a 10% padding we're only going to add 5% and we're going to add a new CSS class called intro dash right that does almost the same thing it's going to expand and take up 50% of the width so there's quite a lot to write i'm going to copy instead so you should notice something that if i exit 576 let's go to trigger and change styles so instead of being top to bottom it's going to go left to right and we've added an additional CSS class called intro dash right right so we're going to add it to our image because it should go to the right side so now your website should look pretty great in my opinion it should look quite stunning and at the bottom you have all the relevant links that you want to show your employees and it can get a cat as well so i'll go a bit in depth into what this flex property does so you can see that it's 1 space 0 space 50 50 percent and what this means is we are going to specify how it will grow and shrink when the space is given to them so flex one means that when when there is additional space we want intro left to grow as big as it wants to and the second zero it means that if there isn't enough space it shouldn't shrink it should remain as big as it was before running out of space and the third property 50 percent is going to request that if it can try to stay around 50 percent of the screen width or rather the amount of width within the box so other properties include flex 0 0 50 percent and what this means is it's not going to grow if there is additional space it's going to stay at 50 percent and you can also add things like 0 1 50 percent so if there is not enough space it's going to shrink and stuff like that so all these properties you can learn on the flexbox froggy site that i showed you so it's a good practice to like just like play around and gain some experience on what all these properties do and it will help you achieve a lot of different weird layouts in your head that you actually want to achieve so what's remaining is we're almost done with the entire html and css course i'm just going to give you guys around five to ten minutes to play around with all the weird things that you have learned so if you want to add new images new lists new div tags uh new links feel free to do it and i'll at the end i'll show you how you can have a website that you can share with your friends and family okay so i'm going to uh show you guys how you can share this website with your friends and family so the platform that we're using is called raffle.it so it does come with a very convenient open in a new tab link that you can just press so if you open in the little uh if you click on this button over here open a new tab what it will have is this link if you're seeing it's uh li k li dash k i probably means the link is wrong you shouldn't be seeing my site if you refresh you should see yours so if you refresh it's okay your changes will still be there but you can open in a new tab and you should have your site here so you can actually copy this and share with anyone around the world and they will be able to see it if you want to have your own website like our custom domain right you can click on this custom domain button and try to figure things out in general what you will need is to pay a certain amount of money to purchase a domain so the good site to go to would be namecheap.com so namecheap.com is a domain registrar which means that you can find like weird websites to buy all right so it does seem like this address is available costs around nine dollars a year which is pretty cheap if you think about it it's like one Starbucks benti property moccasino a year right so you can buy it so i won't actually buy the domain well what in general i can show you is another site so uh there is namecheap.com another site that you can use is pocbun.com so pocbun.com is also a domain registrar but it's a bit cuter and prices are more affordable so i do actually have an account here and i have a few domains so with this domain that you just bought and purchased you can actually come back here and set it up such that it links to your own domain then you can have your own website so for me my name is very short and common so likai is my full name so it's very hard for me to like buy a custom domain so i actually bought this likai.ai website and this is where my portfolio is hosted so you guys can have the same thing like just be creative with your domain name and play around and you can also have other things like this link right that you're seeing and using it's also my website but hosted on a slightly different domain so to host your domain you can use raffle.it or you can use a whole other various set of services like netlify.com it's a good way to host your website netlify.com or if you already have a github account github comes with github pages which hosts your website for free as well so you can use github pages to host your websites additionally if you're a very common line person you may like zyke.co which is also yet another way to deploy websites the better thing about this is you can deploy more than just static sites like html and css you can add in things like server you can add in things like say a jangle backend or a node js backend and stuff like that okay so i'm just going to answer any additional questions that you have here so how do you change your cat picture to another picture so this is quite a bit more complicated you will have to understand how forms work in general so the website i use to get cat images is called cat as a service so it provides all the cat images that you see so far so with all this restful api services you can go play around with them and try to get different images i believe you can get things like dog as a service as well yep and stuff like that if you guys click on a final product reference you should be able to see this final site that i made which is quite a bit cleaner and some additional styles it does some optimizations like compressors images to various different screen sizes such that you don't have to download a very big image size how to change font color so the font color css style is called color c o l o r because internet technology was invented in the united states so we have to go with the spelling yeah so if you change that color to something else like pink or red it should be able to see it so like what i did here was change my color to light pink so you should see that my color is like pink if you change this to say blue it will turn blue how to replace the building image with a chip well this is actually quite simple as long as you upload the new jiff file and you make a hyper text reference to it you should be able to display a chip so if you change this you should be able to get a chip so just change the source attribute to a link either local or foreign and you should be able to get a chip can we add emoji uh yes so if you add an emoji here it should just appear so let me find the cat emoji you gotta add an emoji and it should just appear like that okay so all right so it's now around three o'clock so i think that's it thanks everyone for coming here and if you guys have any feedback please feel in this form bitlyn.ly slash hs-2009-html-fb so if you click on this form we would really appreciate your feedback on how we can do better as well as what you would like to see us teach in the future right so it's over here remember that this is the intro level this is the intro level we have to revamp this but we can't stop right stop