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