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

Practice Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Practice

2:13 with Anwar Montasir

Try previewing the workspace associated with this video in your browser. You’ll see it’s pretty underwhelming visually, and there are plenty of opportunities to use CSS to enhance this design. In addition to including two Google fonts and a background image, you'll include CSS techniques like rounded corners, box shadows, and a gradient.

Resources

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, my name is Anwar. 0:09
    I'm a designer, a developer, and a teacher at Treehouse. 0:11
    My pronouns are he/him. 0:14
    In this practice session, 0:15
    we'll be practicing enhancing a web layout with CSS. 0:17
    Take a look at the workspace associated with this video and 0:21
    you'll see a fairly minimal web page. 0:25
    In the HTML, there's a heading that reads Visit New York City followed by 0:27
    a quote from the song Empire State of Mind by Jay Z and Alicia Keys. 0:32
    The footer contains a photo credit, which probably seems a bit out of place 0:36
    since our page doesn't yet contain a photo. 0:41
    Adding the photo will be one of your tasks for this exercise, 0:44
    as we'll see in just a bit. 0:48
    Also notice that step one of your instructions is found in the head of your 0:49
    HTML document. 0:54
    You'll be adding both the 400 and 400 italic versions of a Google Font 0:55
    called Lora as well as the 700 weight of a font called Comfortaa. 1:01
    I've included an article on working with Google fonts in the Teacher's Notes, 1:06
    if you need a refresher. 1:11
    Switching over to the CSS, you'll notice I've provided a number of selectors 1:13
    to start with, but try previewing the workspace in your browser. 1:18
    You'll see it's pretty underwhelming visually. 1:22
    And there are plenty of opportunities to use CSS to enhance this design. 1:25
    I've loaded a finished version of this exercise on my screen and 1:29
    you'll see that in addition to including two Google fonts and 1:33
    a background image of New York city, I've included CSS techniques 1:37
    like rounded corners, box shadows, and even a subtle gradient. 1:41
    Looks a lot more interesting, doesn't it? 1:45
    Your instructions are written as comments and 1:49
    it looks like there are ten steps to complete. 1:52
    And remember, don't be afraid to Google a property if you can't remember its syntax. 1:55
    Nobody becomes a great developer by memorizing a bunch of CSS properties and 2:00
    values, but rather by frequent practice. 2:05
    So good luck with this exercise and have fun. 2:08
    I'll see you in the next video. 2:11

    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