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

Let’s Start Coding

3:46 with Laura Coronel

Get geared up for coding as we recap what you've learned so far and set the stage for this course. Understand what you'll be taught, the project you'll build, and how to set up your coding environment. We'll introduce you to opening workspaces and the basics of using them, including previewing, saving, and essential editing functions.

Resources

Common Keyboard Shortcuts

  • Save:
    • Windows: Ctrl + S
    • MacOs: Cmd + S
  • Copy:
    • Windows: Ctrl + C
    • MacOs: Cmd + C
  • Cut:
    • Windows: Ctrl + X
    • MacOs: Cmd + X
  • Paste:
    • Windows: Ctrl + V
    • MacOs: Cmd + V

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

    In this stage, our focus was understanding the fundamentals of HTML and CSS. 0:00
    HTML, or Hypertext Markup Language, consists of a collection of tags 0:06
    that we use to instruct the browser on how to structure our webpages. 0:11
    We do this by surrounding the content of our webpages with these HTML tags. 0:17
    Then we use CSS, or Cascading Style Sheets, 0:23
    to tell the browser what we want the content between the tags to look like. 0:26
    As we've come to understand, HTML and 0:33
    CSS are the foundation of websites and web applications. 0:35
    Virtually everything on the web, to some extent, relies on HTML and CSS. 0:39
    This is why learning the basics is an excellent starting point for 0:45
    your journey into the world of coding. 0:48
    Before we get into coding, let me get you all set up to code along with me. 0:52
    In the bottom right corner of this video, you'll find a launch workspace button, 0:56
    click that. 1:01
    Treehouse Workspaces is what we'll use to write our code. 1:02
    You don't have to have any special software on your computer to run 1:06
    Treehouse Workspaces. 1:10
    Your workspace should look something like this. 1:12
    If you've never used our workspace before, in the teacher's notes below this video, 1:15
    you'll find a link to a video teaching you all about workspaces. 1:20
    I'll also guide you through workspaces throughout this course. 1:25
    To the left of your screen, you'll find a list of files. 1:29
    Click on the file named mockup-index .png. 1:33
    Here, you'll see a mockup of the project we'll create in this course. 1:39
    We're creating a webpage where the homepage will showcase our favorite 1:43
    recipes. 1:48
    Clicking on a recipe name will take you to a dedicated recipe page. 1:49
    You can preview the mockup for this by clicking mockup-recipe.png. 1:54
    On the recipe page, we'll feature an image of the dish, a description, 2:01
    a list of ingredients, and the instruction steps to cook it. 2:06
    All the text we'll use in this course can be found in the recipe.txt file, 2:10
    so we don't need to type out all the text. 2:16
    We can simply copy and paste the text as needed. 2:19
    One main thing I want to point out is whenever you make any changes to a file, 2:23
    for example, in the recipe.txt file at the very bottom, 2:29
    let's change the word Rachel to your name. 2:33
    So I'll type Laura. 2:36
    You'll notice an orange dot appeared next to the file name in the File tab. 2:39
    This dot indicates that there are unsaved changes. 2:45
    To save the changes, simply click File, then Save. 2:49
    Alternatively, you could use the shortcut displayed on the right. 2:53
    For me, it's Cmd+S. 2:57
    Once saved, the orange dot disappears. 3:00
    Throughout this course, if you make changes to your HTML or CSS, but don't see 3:03
    those changes reflected in the browser, always remember to save your file. 3:08
    I'll do my best to remind you to save each time we make changes. 3:14
    One last tip is to have the workspaces and this video open side by side like this. 3:18
    That way, you can watch the video and code along with me. 3:25
    Those are the key aspects of workspaces that I wanted to cover for now. 3:29
    I'll make sure to guide you through any additional features of workspaces as 3:34
    needed. 3:38
    Up next, we'll begin crafting the structure of our webpage using HTML. 3:39
    I'll see you there. 3:45

    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