Welcome to HTML and CSS

[MUSIC] 0:00 Hi, I'm Treasure. 0:04 Welcome to HTML and CSS basics. 0:06 HTML and CSS are the two languages we use together to structure and style webpages. 0:10 Pretty much everything on the web uses HTML and CSS to some degree. 0:15 From simple websites to huge and 0:20 complex web applications, like Pinterest and Twitter. 0:22 HTML, which stands for hypertext markup language, is simply a set of 0:26 tags we use to describe to the browser how our webpages are structured. 0:31 We do this by surrounding the content of our webpages with these HTML tags. 0:35 Then, we use CSS or cascading style sheets to tell the browser what 0:40 we want the content between the tags to look like. 0:44 You can think of coding a web page as sort of like making a blueprint for 0:48 the browser. 0:51 With your HTML, 0:52 you're saying hey browser, this particular section of my website is a paragraph. 0:53 And with CSS, you're saying, hey browser, I want this paragraph's text color to be 0:58 white and it's background color to be black, and on and on like that. 1:02 So what can you do with HTML and CSS? 1:07 You can present a lot of content in well organized and visually appealing ways. 1:10 You can build a stunning portfolio to impress potential employers. 1:21 You can enhance your content with funny animations. 1:35 While many websites add effects and interactivity with JavaScript and 1:39 communicate with servers to store and retrieve data, HTML and CSS 1:42 are fundamental building blocks that make up much of what you see in the browser. 1:46 You see HTML and CSS every single day on popular websites like Facebook, 1:50 Pinterest, Tumblr, and Twitter. 1:55 Now let's dive in and 1:58 take a look at the example website we'll be working on throughout this course. 1:59 You can launch it and follow along with me by clicking the Launch Workspace button 2:04 at the bottom right of your screen. 2:08 I'm also going to click this preview icon at the top right so 2:10 we can see what our project looks like in the browser. 2:13 Let open up index.html and take a look at it. 2:17 As you can see, all of our content in wrapped in HTML tags. 2:22 Most tags have an opening tag and a closing tag. 2:27 HTML tags can have what are called attributes on them 2:33 like the class attribute on this h1 here. 2:37 Attributes help us give the browser more information about how the tag should 2:40 work or look. 2:44 In this case, adding a class attribute is one way we can tell our CSS 2:46 which element on the page we want to add styles to. 2:50 We'll go into more detail about classes in a later video, but 2:52 right now just notice that our h1 tag has two classes, tag and name. 2:57 Now let's open up our CSS file. 3:04 We can see that a CSS file includes many HTML tags and classes. 3:07 These HTML tag names and classes tell a browser where to apply the style. 3:13 For example, here's that class that we saw assigned to our h1, this tag class. 3:19 You can see that we're assigning the background-color of tag to this number, 3:25 which is called a hexadecimal value, and is basically just code for 3:30 hey browser, display a light grey background color. 3:33 Let's delete this number and type blue and see what happens. 3:37 We'll refresh and 3:46 now the information that's between the h1 tags has a blue background color. 3:48 We've just used CSS to select a specific part of the web page. 3:52 An html tag and change its color. 3:56 And that is fundamentally how you can use HTML and CSS together to create webpages. 3:59 Learning HTML and CSS is a great way to get started with coding because it's so 4:05 easy to pick up the basics and start making your own webpages right away. 4:10 Throughout this course, we'll be learning the basic components of a web page and 4:14 many of the most common and useful HTML tags and CSS properties. 4:18 By the time we're done, 4:22 you'll have all the knowledge you'll need to start building web pages on your own. 4:23 So let's get started. 4:27