00:48 Okay.
00:53 Hello, welcome to the HTML and CSS webinar by Ana Kungwani.
01:00 Okay, so before we get started, I just want to give a little speaker introduction about me. So, my name is Ana and I'm a rising junior from
01:06 Southside High School with a strong passion for STEM. I lead my school's hack club and I run a nonprofit tutoring
01:12 academy called Inspire Academy where I teach students STEM subjects and coding skills like Python, web development, um,
01:19 Java, and more. I also love to participate in local STEM competitions and hackathons in my area. And I just
01:24 can't wait to help make tech more fun and engaging for you guys today. So, today I'm going to be teaching you guys how to make your own personal web page.
01:32 So, what is HTML and CSS? So, HTML stands for hypertext markup language. So
01:38 this is text that shows like the basic structure and content of a web page. CSS stands for cascading stylesheets. This
01:45 is the design aspect of your website that actually makes it look good like the colors, fonts and layouts. So an
01:52 analogy to understand how they work together is that HTML is like the CS is like the skeleton of the house because
01:57 it provides like the basic structure, foundation and layout whereas CSS is like the decoration and interior design
02:04 of a house as it provides style and makes everything look really good.
02:09 So how do website work? How do websites work? So what happens is when you type a URL like code.org, your browser will
02:16 request a file from an online server. This file will be read in HTML and style using CSS. So your browser will then
02:22 read the code from the file and show you a site. So this kind of like explains how HTML and CSS work together and come
02:28 and play together to just make our lives so much easier and display web pages for us.
02:34 So some HTML basics. So every HTML file starts with this common structure. So it
02:39 starts with dock type HTML which is the opening and this basically just tells your browser it's an HTML document cuz
02:45 there's multiple different languages and this just helps distinguish that really well. Um and then there's the HTML. So
02:51 this is the opening and this is like kind of the container for your whole web page and it has all of your head and
02:57 body content within it. So every line of code you have goes inside of the HTML and the closing of the HTML is at the
03:03 very very end. Um, and then within that there's the head. So the head is where your setup information goes. And this is
03:09 basically like essentially background information or behind the scenes information for your computer. So this
03:15 kind of just like when whatever you write in the heading isn't actually displayed on the web page. It just tells
03:21 your computer all of this information so it can process it in the back for um the code and the web page to work. Um, and
03:27 within your head you can put many things. So for example, you can put your title in the heading. So, this would be like the line where it says this is
03:34 where your title goes. So, whatever you write in there, that title will not actually be displayed um within the web
03:39 page. It'll just be background information for your computer to know so that it knows um how to process
03:45 information for the web page. And then you close the heading tag and then within the and then when you open the
03:50 body tag, so within the body tag, this is where all the stuff that we see and like the visible website content goes.
03:56 So, whatever code you type within the body will be displayed within the web page directly. Um, and there's many things that go
04:03 inside the body like heading, different headings. Uh, you can put ordered lists, unordered list, you can put paragraphs,
04:09 you can put images, and I'm kind of going to break the heading and the head, sorry, the head and the body down in more content in the next few slides. And
04:16 then you can close your HTML tag at the final um, end.
04:21 So, um, like I said, the head is like the behindthe-scenes information of your
04:26 HTML. So within the head you there's three things that people typically put. There's the title which is sets the
04:32 title the meta and this basically just tells your browser what character set to use. So it's like the meta chair set. Uh
04:38 UTF8 is the most common one that we use and that's the one we'll be using today because it supports like all characters,
04:45 numbers, emojis and more. Um and then the style is goes in your head and this
04:50 determines the style information or the CSS for your HTML document. So, one
04:56 thing to keep in mind is that when you're is that for when the HTML and CSS are in the same file, you want to use
05:01 the style tag um within the HTML. But if you were to do your styling in a different file, then you would want to
05:07 link to your CSS stylesheet using a link tag. So, for the purposes today, just to keep it simple, we're just going to be
05:13 using the style tag. So, here's an example of the code. I'm going to try to Okay, I don't think I can zoom in, but
05:19 basically, we have the heading. Within the heading, we have the meta chair set. So, we defined it for UTF8. we have our
05:26 title and our title is just my personal web page and then within that we have the styling. So inside of the styling is
05:32 where your actual CSS goes. So what this line of code says it has h1 and opening bracket. It says the color is pink the
05:38 font size is 12 pixels and it closes that bracket. So what this essentially means is this is actually CSS. Um, what
05:46 this means is that whatever you code for the head, the first heading, it'll always show up being the color pink and
05:52 being um, 12 pixels for its font for its font size. So, this just defines like
05:57 the styling information of our web page. And then you can close the head.
06:02 Um, and then within the body, we have many different tags we can put. And the body is like the visible um, again, it's
06:07 like the visible content for your website. So, it's whatever we code in here will be visibly displayed on our
06:13 web page. And we can see that. So the headings, there's six headings. It goes from H1 to H6. And these just help
06:20 define the structure um of the web page. And there's six levels available. H1, H2, H3, H4, H5, and 6. Um H1 is the main
06:28 heading. And this has the largest text. And then as you move down from H1 to H6, um your heading text gets smaller size.
06:35 And then we have paragraphs, which are written using a P tag. And this is where you can write descriptive information.
06:41 You can just write paragraphs in here essentially. Um, your image tag is img and this where you can embed, sorry,
06:48 embed and show an image into a page. Um, your lists, there's, so that's pretty
06:53 self-explanatory. Your list, there's two different types of lists. There's a UL list and an O list. UL lists using the
06:59 UL tag or unordered list like bullets and um that essentially just whatever information you put, it'll put that in a
07:06 list using bullet points. Whereas, if you were to use the O tag um that's a ordered list using numbers. And so
07:13 whatever information you had like in a list, it would order it from numbers like one through uh whatever amount of
07:18 however amount of things you have. Um and then lastly links. So you use it you
07:24 um this is the a tag and this tag basically acts as a hyperlink. So you
07:29 can just if within your web page you can link to another web page. So if you're making like for example anformational
07:35 site where you just want to like list your re uh oh sorry I thought my thing disconnected. um you can just link to a
07:42 bunch of different things um just to make everything easier. And one thing to always keep in mind with tags is that
07:47 every tag has an opening and a closing. So for example, for your like list like ul and o. So if you were to use a ul you
07:54 were doing unordered um list, you would have a ul opening tag, you would write your information and then you would have
07:59 a ul closing tag as well. And the closing tag has a backslash in front of the ul. So just keep in mind that your
08:06 code will not work unless you have a closing and a or sorry an opening and a closing.
08:11 Okay. So now moving on to CSS. So CSS stands for cascading stylesheets. So
08:17 this the CSS basically just helps you style your web page and it just makes it look um really pretty. So an example is
08:25 like um sorry my screen like um glitched for a
08:31 second. Um, so anyways, sorry. Um, I was saying that the CSS helps you style your web page and make it look pretty. So, an
08:37 example is H1 color is purple and the text line is center. So, this is an example of CSS code. And what it'll do
08:43 is it'll help your H1 headings look purple as the color and be centered. And you want to keep in mind that whenever
08:50 you're doing this, you want to end every single there's um every single line with a semicolon. And whenever you're having
08:56 the CSS, you want to make sure to put the opening and closing brackets after the tag for the properties and values
09:02 that you're styling. So, there's multiple different tags that you can style as well, like the ones we covered
09:07 um in the body. Um there's multiple different ones you
09:13 can cover. Um like the body, H1, H2, P, like the paragraph, image, and etc. And
09:19 you can just style those. And like just one more time to keep in mind that um you always want to put your brackets
09:24 after the tag for the properties and values that you're styling. And you want to make sure to always end your line as semicolons. And like this is really
09:31 important because your code just will not work unless you do this. Okay. So since we're only using one
09:38 file, like I explained before, we're just going to be adding CSS inside of the style tags in our heading. Um so
09:44 here's an example here. So we have our heading. Within the heading, we have our meta chair set, our character set that
09:49 we've defined to be UTF8. So, this will support numbers, emojis, etc. Our title, which again, since everything is in the
09:56 heading, this is just visible. This is not visible um content for us. This is for a computer to process in the back.
10:02 So, those things are really important to keep in mind as you're looking through the code. Um and then you have your style tag. And within your style tag is
10:09 where all your CSS goes. So if you were to style like headings, paragraphs, um
10:14 unordered list, orders, ordered list, images, etc. And then you have the closing style tag and the closing head
10:19 tag. And again, inside the style tag is where all your CSS rules will be. So
10:25 there are some example styles that I wanted to cover that you can do. They're all pretty some of most of them are pretty self-explanatory.
10:31 Um so color, you can just define the color of whatever property you have.
10:36 Text align, you can align your text to be either in the left, center, or middle. Font size, which just changes the font or text size. Font family,
10:43 which is like the different families um of the font. So like Ariel, Verdana, uh sans surf, like all the common ones. Um
10:50 line height, which just spaces your code. You can change the width and the length. So this the width and the length
10:56 and the height are actually um best for when you're doing images because you can if you have an image and it's just way
11:01 too big, taking up the whole screen, you can use these properties to just um restyle it really well. Um, a border
11:09 will just add a border to your um co to your web page. Border radius would create a rounded border if you didn't if
11:15 you didn't want like the typical uh box border. The list style type will change the bullets or the number style used in
11:21 a list depending to what you set it to. So, if you wanted like um there's different types of bullets, right? There's like the open bullet with like
11:28 the like nothing in it. It's just like um clear, I think. And then you could do the closed bullet. They have like the
11:34 box bullets, the like triangle bullets. like you can change all of that using list style type depending on whatever
11:39 your web page wants. Um text decoration that's just if you want to use decorative lines over your text. Hover
11:45 which is just the user can hover over an um an element. Typically this would be best to use for links. So like if um
11:51 someone wanted to click on a link they could hover over it just to know uh what the link is. And then padding just
11:57 creates space around the elements content rather than having a clear and defined border. So if you just wanted to space things out more basically. So here
12:04 are some examples of more CSS basics. So we have um heading one. So we have some
12:12 like headings you could code for. So for example, if you did heading one, color is black and the font size 18 pixels.
12:17 This would make your heading one like anything that you write in your heading one would be black and 18 pixels. Um the
12:23 same same applies for paragraphs which are um written using the P tag. So you
12:29 can define the font family, you can define line height. um images, you can do width, you can do border, border
12:35 radius, um list, the different list types. So if you did the ul the unordered list, um within that, if you
12:41 wrote list style type square, that means anything that you have in an unordered list, instead of it being in the typical
12:46 rounded bullets, it would be in square bullets. And then for O, if you had an ordered list, instead of it being numbers like 1 2 3 4, etc., it would be
12:54 as circles. So that technically like undefes it as like an unordered list
12:59 because it's not ordered by numbers anymore. it's ordered in a different sense. Um, and then you could also change the styling properties for links.
13:06 So, if you used your a tag and you said the color was purple, text decoration is an underline overline uh dotted red,
13:12 that would just make your text be the color purple and the decoration when you h like when you um were to click on the
13:18 link, it would just have an over or an underline overline that's red. Um, and then a hover is if you wanted to hover
13:25 over your link. So you could say that when you hover over the link, it gives you an underline that's wavy pink and it's 10 pixels, for example. So those
13:33 are just some different things you can uh do with the CSS.
13:39 Okay, so HTML and CSS obviously work together. So here's an example of everything running together. Um I'm not
13:46 sure if I can zoom in. Let me try. Okay. Oh, wait. I don't Oh, okay. I'm just
13:54 going to put it back on presentation mode cuz I don't think I can zoom in. But basically, so you would have again
14:01 the doc type HTML. I'm just going to go over everything one more time. So the doc type HTML, it tells your um it tells
14:08 the code that it tells Yeah, it tells the computer and the code that it's going to be a um HTML document type that
14:14 you're coding for, not any other language. You have the opening HTML tag. Within that, you have your head and your
14:20 body. Remember the head is the information that the computer uses to process and whereas the body is like the
14:26 visible website content that we actually see displayed on the web page. Um within the head you can set your character set
14:32 you can write a title and you can style different things. So in this example um they've styled the heading one to be
14:38 pink and font size 12 pixels. So anything written in the as heading one will be um pink and 12 pixels. And then
14:48 they and they also had the opening bracket and the closing bracket after the H1 property. And that's really
14:53 important. And then after each value property that they had like color pink, font size 12 pixels. They made sure to
14:58 put a semicolon so that everything would actually work. And then you could do the same for any other things you want. So in this example, they did it for a
15:04 paragraph. So the font family, they set it to sand surf and the border would be 3 pixel solid black. So this means that
15:12 anything you write in the paragraph will be sans serif and it'll have a border that's three pixels and solid black. And
15:17 then you close the styling tag and again it has the backslash in front of the styling tag which just properly closes
15:23 it. Um and since everything was in the head you have to make sure you close the head because what would happen if you didn't close the head is that all of
15:29 this um and like if you didn't close the head and you didn't open the body everything would go inside of your head
15:35 and it would just wouldn't be complete. to one it wouldn't work and also your body tag like your actual content wouldn't work at all because it hasn't
15:41 been defined in a body it hasn't been defined in the body space where the visible website content is meant to be.
15:48 So you want to make sure you close the heading tag open the head tag open the body tag within the body tag you can
15:54 write um code for anything. So for example for my first heading I wrote my name is Anya. So what this is going to
15:60 do is when the website comes to play together when everything's together it's gonna say my name is Anya. And since we
16:05 defined before that the heading one is pink and has a font of 12 pixels. At the top of my web page, it's going to say my
16:11 name is Anya in pink and be 12 pixels. Same applies for the paragraph. Um I said a little bit about me is that I'm a
16:18 rising junior and I love to bake and go on runs, go for runs. So when the web page opens, it's going to have that
16:23 paragraph. A little bit about me is that I'm a rising junior. I love to bake and go for runs. And that's going to be written in sans sur family family size
16:31 and it's going to have a border that's three pixels around it. Um, and then a order. I use an unordered list here. So,
16:38 you can put multiple things in an unordered list. In my example, I just put one. Open the
16:44 Sorry, it keeps saying at the bottom that it disconnected. So, I thought okay. Um,
16:51 um, so it has the opening ul tag. So, this is your unordered list. And then within the ul, you want to write li. So,
16:58 the li tag that you open and close that says that it's a list. So this would mean that since you have the UL at the
17:03 top, it's unordered and then the LI means unordered list and they come together to make an unordered list. So what this would look like when the um
17:10 web page uh came together is that you would have an unordered list and within that unordered list, it would say my
17:15 favorite color is rose gold with a um bullet point, not a number since it's not ordered. And if I wanted to, I could
17:22 go back up to the style and I could style the unordered list however I wanted and it would be displayed in the web page. Um, and then I have my closing
17:29 UL tag because again you have to have a closing. Every tag has to have an opening and a closing. Um, and then I
17:36 have the closing for my body tag. And then I have the closing for cuz everything was in the body starting um
17:44 from my name is Anya. And then you have the closing HTML which is closing every single thing. So all of the head and
17:49 body information is getting saved. So, this is a little bit of um
17:56 starter code that I used when I was making my personal website and I had as
18:02 a little bit of a demo. So, if anyone is coding alongside with me, you can copy and paste this starting code um or not
18:08 copy paste, but like maybe type out the starting code um if you just wanted to try it out yourself. But again, this
18:14 kind of covers the same content that um the previous slide covered. Um it has
18:21 the HTML doc type HTML the head with the um computer information
18:28 um the styling um information and I styled an image in this case too. So I used other properties like border,
18:34 border radius, padding, width. Um I closed all of my tags and then I wrote some information in my body. I also
18:40 linked to an image and I think this is uh something to also go over. So when you're linking to an image the way you
18:46 have it is that you have an opening image tag you write src which stands for source equals and then you have a double
18:52 quotation marks and what you put inside that double quotation marks is the actual source of your image. So, how you
18:58 would do it if you were to actually make this um web page yourself is that you would um search up your link on Google
19:05 or whatever and then you would uh click on the right like I think you would like
19:10 right click on the image and you would get the link and then you would paste that into your image source in the double quotation marks here and then you
19:16 have a LT which stands for like the alternate description and you would say that equals and then in your double
19:21 quote you would write one or two words that explains the image you paste image link you pasted in. So, for example, if
19:27 I wanted to uh link to an image of a dog, I would say image source equals, I would link the image of the dog I got.
19:33 And then in my alt or my alternate equals in the quotation marks, I would just write dog or I would write pick of
19:39 dog or just a few simple lines that define that. Um, and yeah.
19:47 Okay. So, now I'll be presenting a live demo of a personal web page that I made
19:52 about me. And um really quickly, I'm just going to grab my charger cuz my MacBook's about to die. So, sorry. Give
19:58 me one second.
20:11 Okay. Sorry about that. Um so, I'm going to be showing you an exampler about me page that I made. Um if you guys want,
20:18 you guys can try making your own in your in the meantime. um or some other time.
20:23 But so this is my screen. I'm going to start by first showing the web page and how it looks and then I'll go deep into
20:29 the code um and explain that. So I have Anna's personal web page. Um and again
20:35 since I you the reason that we're able to see these emojis is cuz I used the um
20:40 meta chair set UTF8. Otherwise it wouldn't be able to support these emojis. Um and then I have a little
20:47 paragraph. I said, "Hi, my name is Anya and I love coding and iced coffee." Um, I wrote some facts about me. So, like I
20:53 love baking and as I as I told you guys, I run my own nonprofit tutoring academy. I wrote my hobbies. Um, and then see
21:00 here we can see I wrote four hobbies. I have running, building projects, listen to music, cooking recipes. So, the way I
21:06 did this is since you're seeing these bullet points, this means that an unordered list has been used in my code.
21:11 And that's exactly what I used because we're seeing bullet points. If we were to see numbers like running like number
21:17 one running number two projects three music four cooking recipes that would mean I use an order list because it's
21:22 ordering them by numbers. Um and then I wrote here's a pick of my favorite TV show. Again I just used another heading
21:29 like I did for the hobbies. And then I put a picture of my favorite TV show which is How I Met Your Mother. And the
21:34 way I did this is I used the image source coding. So I did image source equal. I put a link to my code. And then
21:40 for my alternate description, I just wrote a fave TV show or how I met your mother. Just some lines to explain it.
21:46 So and then I also styled all these properties in the CSS. So in the site that I've used, HTML and CSS are
21:53 separately defined. So I did it a little bit differently. But if you guys were to do this, you would just link the HT that
21:59 you would just link the CS like using the tutorial I give today, you would just link the CSS within the HTML using
22:05 the styling tag. And again, remember, close the open the tag and close the tag. Um, and the way I use CSS here is I
22:11 made my first heading H1 be pink. Um, I added the emojis in. Um, I made my text
22:19 be white. I made the whole entire background, like this whole thing, be black. Um, I made my hobbies be a light
22:26 blue color. The so my H1 I coded to be light blue. Um, I coded for the
22:31 unordered list to be white. And I think I just set it to the regular font. I think either Ariel or Verdina. I think
22:36 it says Yeah, it says Verdina. So, I did that. And then same thing for the other heading. Um, I did the same thing. I set
22:43 it to blue. And then for image, I was able to put the rounded like border cuz
22:49 I coded for that in the CSS. So, this kind of just explains how the HTML and CSS are coming together. And I think it's personally really cool because
22:56 you're like coding things out and you're seeing that being reflected on your web page and then you're styling it and you're seeing it actually um come to
23:04 color come to life and come to color um with the CSS. So let me see if I can
23:10 show the code. Okay. Yeah. So this is my coding um that I use for the HTML and the CSS. So um again we can see that I
23:17 defined my document type to be HTML um or the opening HTML opening head. I set my meta character set to be UTF8, which
23:24 allowed the emojis. Um, I created a title. So, my title was my personal page. So, again, this shows how like the
23:30 title isn't always displayed because I called I called my title my personal page, right? But, um, how can I see my
23:36 website? Okay. Yeah. Um, I don't wait.
23:43 I'm just going to reload real quick. Yeah. Um, I don't know where my website
23:48 went. Oh, wait. Um, sorry. One, give me one second. I
23:54 don't know where my website went. I think Okay, I'm going to go back to the slides
24:00 and open the website again. Um, on a um Okay, here it is. Sorry. Um, so we
24:07 can see here that if you were to look at the title, it says my personal page, right? But when we look at my web um
24:14 site, it says Anya's personal page with the emojis. And the reason it doesn't say what's in the title is because I
24:19 defined this in the head. So, what this is going to do is it's going to tell the computer that this is like my personal
24:24 page. But in reality, when it's displayed, it's going to display whatever it says in the body. And that makes a lot of sense because if you were
24:29 to go down to this body line, you can see that I said H1. My first heading should be Anna's personal page with the
24:35 um emojis. Um, and then since I linked to my CSS on
24:41 the side here and I didn't have them in the same side, I used the link tag. So, I linked my uh to the stylesheet and my
24:48 reference is the style.css CSS because that's what this is called. Um, and that closes that concludes my head. And once
24:53 I close it and I open my body tag is where my actual coding goes. So I coded for H1 the Anya's personal web page. I
25:00 coded for my paragraphs. So I said my name's Anya and like etc. Um, I coded another paragraph under this. And since
25:06 I did two different paragraphs, we can see that they're spaced out. If I did this in one paragraph, we would just like have everything all together unless
25:13 I used a line break. And if you don't know what a line break is, it's basically like when you're whenever you
25:19 um if you're using I think my part got cut off. Um so I was saying that if you're how a line break works is that if
25:24 you're using like a really long if you're writing like a really long paragraph or really long line of code
25:30 and you just don't want it to take up the whole screen, you can use a line break in the middle and that'll split it in half. But what I did here is I just
25:35 made two different paragraphs for easiness. Um and then I have my second heading called my hobbies. And since this is my H2, we can see that it's a
25:42 lot smaller because again as you progress from H1 to H6, it gets smaller each time. So my H1 was this big, but
25:48 then my hobbies was just like smaller. Um and then I used a unordered list
25:53 here. So we can see I have and I concluded my um H2 tag by the way. And then I opened my unordered list. I
25:60 closed my unordered list. And then within that I added multiple different lists. Um so I said running, building
26:05 projects, music, and the recipes. And since I used the UL at the top, this reflected in my web page by showing the
26:12 brackets or sorry, not brackets, bullets, the bullet points. Um, and then for my and then again, I wanted so I
26:19 wanted the hobbies and the um here's a pick of my favorite TV show to be the same size, which is why I used H2.
26:25 Again, if I wanted here's a pick of my favorite TV show line of uh text to be even smaller, what I could do is I could
26:31 say it's H3. And now this would make this even smaller than the hobbies was. And you could see just like the biggest at the top, smaller, and then smaller,
26:38 and then it keeps going. Um, and then I did the image source code. So I said
26:44 image source equals I found a picture of how I met your mother on the internet. So I just pasted that in alternate
26:51 description. I just How I Met Your Mother. So it's just a little description about what my um images. And
26:56 obviously this is not shown like it does not say how I met your mother at the like obviously on the image it says how I met your mother because that's the
27:01 image I chose. It doesn't say that on the bottom. And that's cuz when you're doing this, it won't say what your alternate description is on the actual
27:08 web page. This is just kind of one of those things that like it's like if you were to have a um image and let's say
27:14 you were doing a lot of code later in the future and you don't know what you're like you have the link but you
27:19 have no clue what the image is, reading the alternate description would just help you and make everything um a lot easier for you. Um okay. And then
27:30 um I close my body tag and then I close the HTML tag. Um and remember the body
27:35 tag is closing all of the content I wrote and the HTML is closing everything the um head and the body. And then we
27:41 can also go to the CSS side. So CSS side I said my body will be font family
27:47 Verdana and within Verdana I said sand surf cuz you can also classify even deeper if you want. Um I said the
27:52 background color. So, what you can do is you can also custom choose a background color using the CS there's like a CSS
27:58 color palette. So, that's what I used. Um, I can show you guys what the CSS color palette looks like.
28:04 Um, let's see.
28:10 Oh, wait. Okay. I don't know if it'll let me show you guys a color palette, but yeah, basically. Okay, here it is.
28:17 So, um, okay. I'm not sure. But basically, you can see there's different color
28:23 palettes. Like this will give you like a purple gray color. This will give you a pink, etc. So, you can just copy paste
28:28 some of these. And there's a way to make your own custom colors, too. So, that's what I did for my oop, sorry. That's
28:36 what I did for my um background color. So, what this is,
28:41 since this is the body's background color, this makes your whole entire web page be black. If I did a different um
28:48 hex like color palette, then it would give me a different color obviously. Um and then I also defined my color. So
28:56 again, I use the htx color palette. So that just made the color be the one I defined. Margin, I set the margin to be
29:03 40 pixels. And I said that the text align should be center. So what this means is since it's centered, all my text is in the center. If I was to do
29:09 left align, it would all shift to the left. Right align all to the right. Like that's pretty self-explanatory. Heading
29:15 one, I decided to also I used a custom made color palette, but um if you don't know how to do that, you can just type
29:20 out a regular color. I was just using that cuz that worked for me easier cuz I wanted like a specific set color for my web page. So again, I set the color and
29:27 the font size. So the color that I said for each one was like this is some shade of pink, I think. So this just made it
29:33 pink and it made it 24 pixels. Um same thing for heading too. I set it a custom blue color and it made it 20 pixels. So,
29:39 this made my second heading be 20 pixels and blue. Um, for my UL, for my unordered list, I decided to make a line
29:46 height of 1.5. Um, and list style position of inside. So, what this did is
29:51 this just made my UL be spaced out by 1.5. So, it's just a spacing technique. Um, this isn't required. I just wanted
29:58 it to look a little bit better. And then for my image, I decided to add a border, which is 2 pixel solid, which is why when you go to the border, you can see
30:04 that we can see a two pixel like border. I don't know if you guys can see like this thing. Yeah. Um,
30:11 and then I also set the border radius to be 8 pixels, which is why it's a thick
30:16 border radius. If you do like less, then it'll obviously look less thick and it won't be as visible. So, that's really
30:22 good to know. I set the padding of the image to be 6 pixels. So, we can see that there's a little bit of space in between the different borders just cuz
30:28 of the padding. If I did more, it would be a bigger space. Um, width and then margin top. So, I just said these again
30:34 to just style my image a little bit better so it didn't take up the whole screen and look like really bad. Um, so
30:40 yeah, that's basically all the code. The JS I did not type in. I think this like typed in by itself and that's probably
30:46 like something we can learn next time. Um, so that's all for my web page. So now if you guys want to if you found
30:53 this webinar enjoying enjoyable and you would like to keep coding um first of all you can obviously reference
30:58 reference this video. I think it'll like post to the YouTube and you can also try with the starter code. But I think I put
31:03 like where did I put it? Um somewhere. Yeah, right here the starting
31:09 code. You guys can obviously reference this and try this yourself and see a web page come to life. But um if there's
31:15 some other um sorry other tools you want. Um Code Academy is a really good
31:21 one. I don't think you have to make an account for that or you might but it's like you don't have to pay at all. W3
31:26 school is completely free. I don't even think you need an account unless you want to save your work. Um you can try their tri editor. It's really good. Code
31:32 Pen, Code.org, and HTML Dog. These are all the ones you use, but oh, sorry, all the ones I use. So, you guys can try
31:38 these as well. But, um, there's also really good tutorials other places, too. So, yeah. Um, so in conclusion for
31:45 today, what we learned away and what what we learned and I want what I want you guys to take away is that today you
31:51 guys were able to learn the foundations of building websites with HTML and CSS. you learned that remember structure and
31:57 foundation comes with HTML and styling and making your web page look really pretty comes with CSS. So, I really hope
32:03 this inspired you guys to keep going and maybe even create uh your own portfolio site or web page someday like I created
32:08 mine. Um, and if you found this webinar enjoy enjoyable, I really would like if you guys could join me on the next one
32:14 as well because I'll be teaching a new enjoyable STEM topic and if anyone has any ideas, I I hope you can leave
32:21 comments. So, leave a comment if you have any ideas. Um so if you have any
32:26 questions or any confusion about tags CSS and additional resources uh please let me know. Um and yeah that's it. So
32:34 thank you for your time. If you have any additional questions please reach out on this time for others YouTube channel or
32:40 uh you can find my email. So yeah thank you.