Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Welcome to HTML and CSS

4:28 with Treasure Porth

In this lesson, you'll learn about the role of HTML and CSS, where and how these are used to structure and style many of the websites you visit every day, and you'll take a look at the example project you will be working on throughout the course.

Starting your journey in web development can often feel like you're learning a new language. There is a whole range of new ideas and concepts you'll encounter, but you don't always need to memorize or remember what these terms mean straight away! In the Teacher's Notes for each lesson in this course, you'll find some helpful additional comments and resources to help you develop and deepen your understanding over time.

Saving your changes in Workspaces

Remember, to view the changes you've made to the project files in your Workspace, you'll first need to save each file you've edited before refreshing the browser. When Treasure asks you to change the color to blue and refresh, make sure you've saved the file first! This is quick and easy if you use one of these shortcuts:

Saving your file

Operating System Keyboard Shortcut
Mac OSX Command āŒ˜ + S
Windows Ctrl + Sā€‹

New Terms:

HTML - HyperText Markup Language, a set of tags we use to describe the structure of web pages.
CSS - Cascading Style Sheets, a language used to describe how an HTML element should look when displayed in a browser.

Website examples:

Further Reading:

These resources are optional, but are great assets for learning more about the field of web development!

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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's open up index.html and take a look at it. 2:17
    As you can see, all of our content is 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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up