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

Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Course

3:33 with Anwar Montasir

Together we’ll be building the CSS for the homepage of a travel website advertising Lake Tahoe, California. The homepage works with a number of both foreground and background images, introduces web fonts from two different sources, and, importantly, remains legible on a variety of device screens.

Project Files

Treehouse Courses

Further reading

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. 0:09
    My name is Anwar. 0:10
    I'm a designer, a developer, and a teacher at treehouse. 0:11
    My pronouns are he, him. 0:14
    In this course we're going to learn CSS properties for enhancing visual design. 0:17
    We'll cover various properties for styling text, 0:23
    including loading Web Fonts from external resources. 0:26
    We'll learn techniques for turning our CSS boxes into more than just rectangles. 0:30
    And finally, we'll learn some really cool visual effects 0:36
    using CSS filters and gradients. 0:40
    Together we'll be building the CSS for 0:43
    the homepage of a travel website advertising Lake Tahoe, California. 0:46
    The homepage works with a number of both foreground and background images. 0:52
    Introduces Web Fonts from two different sources and 0:57
    importantly, remains legible on a variety of device screens. 1:02
    To get started with our Lake Tahoe site, 1:08
    simply launch a new workspace and follow along. 1:11
    You can also download the project files for 1:14
    each lesson in the download section of each page. 1:19
    The style.css file I've provided is blank, 1:24
    apart from a universal selector with a box sizing border box declaration, 1:28
    a CSS rule increasing our base font size to 20 pixels from the default 16 pixels, 1:36
    and a declaration that will give us responsive images. 1:44
    You'll also notice I've included comments relating to how we're going 1:50
    to organize our CSS. 1:55
    A variety of methods exist for organizing your styles, and 1:57
    no one's scheme is universally accepted by developers. 2:01
    But for this lesson, I've divided our CSS into web fonts, 2:06
    base styles, main styles, and media queries. 2:12
    I'm going to use my base styles to make a broad changes using CSS type selectors, 2:17
    such as making my headings larger or styling the appearance of text hyperlinks, 2:24
    while more specific selectors will go in main styles. 2:30
    I've included readings in the teachers notes on organizing your CSS. 2:34
    This course builds on concepts, techniques and 2:40
    principles covered in previous Treehouse CSS courses. 2:44
    And assumes you're familiar with the topics covered in those two courses. 2:48
    Including, CSS Selectors and 2:52
    Values and Units, the CSS Cascade, 2:57
    the Box Model, Display and 3:03
    Positioning and Media Queries. 3:07
    If you're not comfortable with all the topics I just listed, check out 3:12
    Treehouse's courses on CSS basics and CSS layout linked in the teacher's notes. 3:17
    Then join me right back here. 3:23
    Otherwise, we'll check out the project files and 3:25
    begin writing CSS in our next video. 3:29

    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