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

HTML and CSS Demystified

4:19 with Laura Coronel and Rachel Johnson

Discover the essence of web development in this concise video. Learn the roles of HTML and CSS, where HTML structures web pages, while CSS styles them. Uncover how these two languages work in harmony, creating captivating web experiences.

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.

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 Laura, an instructor here at Treehouse. 0:09
    HTML and CSS are the two languages we use together to create the structure and 0:13
    style of webpages. 0:19
    Whether you're creating a simple website or a complex application like Google or 0:20
    Amazon, HTML and CSS play vital roles in making it all happen. 0:27
    A typical web page can be broken down into three key layers that 0:32
    work together to provide a seamless user experience. 0:37
    These layers consist of a content layer responsible for 0:40
    presenting the information on the page, 0:44
    a presentation layer that defines how that information appears visually, 0:47
    and a behavior layer that allows users to interact with the page. 0:53
    HTML, or Hypertext Markup Language, takes charge of the content layer. 0:57
    It forms the structural core of a web page. 1:03
    On the other hand, CSS, which stands for Cascading Style Sheets, 1:06
    is in charge of the presentation layer. 1:11
    It focuses on enhancing the visual aspects of web pages, 1:13
    including elements like colors, typography, layout, and more. 1:18
    The behavior layer is managed by JavaScript, 1:23
    which adds interactivity to the page. 1:27
    For instance, it can trigger actions such as displaying 1:29
    a larger image when a user clicks on a smaller one. 1:34
    HTML and CSS form the foundation of every website. 1:37
    But for major platforms like YouTube, LinkedIn, and Netflix, HTML and 1:42
    CSS are just two of the many technologies they use to deliver their services. 1:48
    You may have heard of JavaScript, Python, or Ruby, and these are just a few 1:53
    of the technologies that are used to create today's intricate websites. 1:59
    Web development is typically divided into two main areas, 2:04
    front-end development and back-end development. 2:08
    Front-end developers use HTML, CSS, and JavaScript to build what the client sees, 2:12
    the elements that run directly in the user's browser. 2:19
    Meanwhile, the back-end developers are responsible for what runs on the server. 2:23
    They use languages like Python, Ruby, and 2:28
    Java to work with databases to save, change, and retrieve data. 2:32
    As an example, JavaScript runs in the browser to add interactivity to a page. 2:37
    If you wanted to have a window pop up each time a user clicks a button, 2:43
    or if you wanted to display a group of images with a slideshow, 2:48
    you'd use HTML and CSS to build and style the slideshow. 2:53
    And JavaScript to program the slideshow images so 2:58
    that they slide in and out of view. 3:02
    Or think about a login page for a website like Amazon. 3:05
    You'd use HTML to create input fields and a submit button, and 3:08
    use CSS to control what the button and input fields look like. 3:13
    When a user hits enter or click submit, 3:18
    JavaScript can be used to validate the information they've entered, 3:20
    such as checking for an at symbol in an email address. 3:25
    JavaScript can also provide error messages or confirmations upon submission. 3:29
    And then you might need a back-end language like Python, Ruby, or Java to 3:34
    save the username or email addresses to a database for future retrieval. 3:40
    That's how HTML and CSS fit into the larger field of web development. 3:45
    Front-end developers use HTML and CSS to build what the client sees on the browser. 3:51
    So whether you want to build your own website, web applications, or 3:56
    just know how to modify existing websites and apps, starting with HTML and 4:01
    CSS is your best foundation. 4:06
    Now, we've only begun to scratch the surface. 4:08
    We'll dive deeper into HTML and CSS, then get you all set up to code along with me. 4:11
    Let's get started. 4:17

    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