Applied Visual Design Challenges

[QuincyLarson]

@atjonathan is in charge of coordinating the expansion of these challenges, but he needs your help.

For each challenge, please reply to this GitHub issue with:

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

   Final Challenges List:

Challenges using a Bootstrap Card (consistent)

• [x] Create visual balance using the text-align property
  • [x] Align Text Left
  • [x] Center Text
  • [x] Justify Text
• [x] Adjust the Width of an Element Using the width Property
• [x] Adjust the Height of an Element Using the height Property
• [x] Create a Visual Balance with the height of an element
• [x] Create visual emphasis by using bold text
• [x] Create visual emphasis by using underlining text
• [x] Create visual emphasis by using the italic property on text
• [x] Create visual emphasis by using the strikethrough property
• [x] Create a Line Using the hr Element
• [x] Create visual emphasis by adjusting thebackground-color property of text.
• [x] Create visual emphasis by adjusting the size of a header versus a paragraph tag.
• [x] Create visual emphasis by making a card like element stand out by adding a box-shadow.
• [x] Create a Graphic Using CSS
• [x] Decrease the Opacity of an Element

Challenges based on position

• [x] Change an Element's Relative Position
• [x] Move a Relatively Positioned Element with CSS Offsets
• [x] Lock an Element to its Parent with Absolute Positioning
• [x] Lock an Element to the Browser Window with Fixed Positioning
• [x] Push Elements Left or Right with the Float Property

Challenges based on color

• [x] Learn about Complementary Colors
• [x] Learn about Tertiary Colors
• [x] Adjusting the Color of Various Elements to Complimentary Colors
• [x] Adjust the Hue of a Color
• [x] Adjust the Tone of a Color

Challenges based on typography

• [ ] Learn the Importance of Ratios in Type
• [ ] Learn About Modular Type
• [ ] Apply Different Ratios to Type Using the font-size Property
• [ ] Create a Typographic Style Guide
• [x] Setting the values of heading tags
  • [x] Set the value of h1 to 68px
  • [x] Set the value of h2 to 52px
  • [x] Set the value of h3 to 40px
  • [x] Set the value of h4 to 32px
  • [x] Set the value of h5 to 21px
  • [x] Set the value of h6 to 14px
• [x] Set the value of Paragraph text to 16px
• [x] Adjust the font-weight of header 1–5 tags.
• [x] Adjust the line-height of a paragraph until the paragraph is properly spaced
• [x] Use the text-transform property to make text uppercase.
• [x] Using Google Fonts
  • [x] Incorporate a Google Fonts Into your Header
  • [x] Assign a Google Font using CSS

Ungrouped challenges

• [x] Change the Position of an Element on its Z Axis
• [ ] Use the box-shadow z-axis and Opacity together to Animate an Element
• [ ] Create a Pattern by Reusing a Block of Elements
• [x] Create a gradual CSS Linear Gradient
• [x] Use a CSS linear gradient to Create a Striped Element
• [x] Use the CSS Transform Property to Scale an Element on Hover
• [x] Use the CSS transform Property SkewX
• [x] Use the CSS transform Property SkewY
• [x] Create a more Complex Shape using CSS and HTML
• [x] Use the CSS Transform Scale Property to Change the Size of an Element.
• [x] Create Texture by Adding a Subtle Pattern as a Background Image
• [x] Adjust the color of an Anchor Tag
• [x] Adjust the Hover State of an Anchor Tag

Challenges based on Animation

• [x] Learn how CSS Keyframes and Animation Properties Work
• [x] Create movement using CSS Animation
• [x] Animate Elements Continually using the Infinity Property
• [x] Make a CSS Heartbeat using the Infinity Property
• [x] Animate Elements at Variable Rates
• [x] Animate Multiple Elements at Variable Rates
• [x] Learn how Bezier Curves work
• [x] Use a Bezier Curve to Move a Graphic
• [x] Make Motion more Natural using a Bezier Curve
• [x] Use CSS Animation to Change the Hover State of a Button
• [x] Create Visual Direction by Fading in an Element to the left.

[ghost]

I will be a topic owner for this one.

[Bouncey]

I'll help with this

[ghost]

@Bouncey awesome. @FreeCodeCamp/issue-moderators Me and @Bouncey will create these challenges 👍

[ghost]

Create a Visual Balance with the height of an element

Challenge Description

In this challenge we have replaced the two anchor tags with a list group.

To keep everything balanced, we should make sure every element's width and height makes sense in that context.

Instructions

Change the height of the h4 tag to 25px to make the card more compact and a little cleaner.

Challenge Seed

<style>
    h4 {
        text-align: center;
        height: 40px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="list-group">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="list-group">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

[brooksvb]

Hello, I have an additional suggestion; please also have a couple lessons to introduce the CSS transition property. It's been extremely helpful to me once I found it, and very very simple. For example, I spent hours trying to get this codepen to fade to a new random color background each time the button was clicked, using @keyframes and jquery. The problem was that the @keyframes wouldn't run again once the animation was updated to new colors, and I spent endless time trying to find workarounds and such.

By chance, I looked at another user's codepen and noticed his use of "transition." I immediately looked up the documentation of the property and facepalmed, very, very hard. All I had to do all this time was add the transition property to my body element, and simply change the background color. Problem solved.

Another super simple tool that is very powerful.

[ghost]

@woofiewilly good idea! It might be a better idea to teach those concepts in the applied user experience design.

[ghost]

Create visual emphasis by using bold text

Challenge Description

To make text bold, you can use the strong tag. This is often used to symbolize text as important. When using the strong tag, the browser applies the CSS of font-weight: bold to the element.

Instructions

Wrap the strong tag around our h4 with the class of .card-title.

Challenge Seed

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="list-group">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title">Google</h4></strong>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="list-group">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

[ghost]

Create visual emphasis by using underlining text

Challenge Description

To underline text, you can use the u tag. This is often used to group a section of text as something to remember. When using the u tag, the browser applies the CSS of text-decoration: underline to the element.

Instructions

Wrap the u tag around both our anchor tags in our div with the class of .list-group.

Note

Try to avoid using the u tag when it could be confused for a link as anchor tags also are underlined.

Challenge Seed

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title">Google</h4></strong>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="list-group">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title">Google</h4></strong>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Create visual emphasis by using the italic property on text

Challenge Description

To emphasize text, you can use the em tag. This displays text as italicized. When using the em tag, the browser applies the CSS of font-style: italic to the element.

Instructions

Wrap the em tag around our paragraph tag to give it emphasis.

Challenge Seed

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title">Google</h4></strong>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title">Google</h4></strong>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Create visual emphasis by using the strikethrough property

Challenge Description

To strike through text, you can use the del tag. We can use this tag to show that a section of text is no longer valid and it will strike a line through the text. When using the del tag, the browser applies the CSS of text-decoration: line-through to the element.

Instructions

Wrap the del tag around "Google" inside our h4 tag and then add "Alphabet" which is not striked through, beside it.

Challenge Seed

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title">Google</h4></strong>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title"><del>Google</del> Alphabet</h4></strong>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[QuincyLarson]

@atjonathan you're off to a strong start with covering these additional concepts. Keep it up :)

[ahmaxed]

Set the value of Paragraph text to 16px

Description:

Using font-size property in CSS we can change the font size of different elements.

Instructions

Set the value of Paragraph text to 16px to make it more visible.

Tests:

assert($("p").font-size() == 16, 'message: Your <code>p</code> tag should have the size of <code>16px</code>.'),

Initial Seed Code:

<style>

  #avatar {
    height: 486px;
    width: 320px;
  }

  p {
    height: 486px;
    width: 320px;
    font-size: 10px;
  }

  /** Only change code above this line. **/

  #avatar, p {
    display: inline-block;
    margin-top: 20px;
  }

</style>

<div class="thumbnail">

  <img src="https://bit.ly/smallgooglelogo" alt="Google Logo">
  <div class="caption">
    <h3>Google</h3>
    <img id="avatar" src="http://specials-images.forbesimg.com/imageserve/56ce2b24e4b062f6b59a7f7a/320x486.jpg?fit=scale&background=000000" />
    <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
  </div>

</div>

Solution:

<style>

  #avatar {
    height: 486px;
    width: 320px;
  }

  p {
    height: 486px;
    width: 320px;
    font-size: 16px;
  }

  /** Only change code above this line. **/

  #avatar, p {
    display: inline-block;
    margin-top: 20px;
  }

</style>

<div class="thumbnail">

  <img src="https://bit.ly/smallgooglelogo" alt="Google Logo">
  <div class="caption">
    <h3>Google</h3>
    <img id="avatar" src="http://specials-images.forbesimg.com/imageserve/56ce2b24e4b062f6b59a7f7a/320x486.jpg?fit=scale&background=000000" />
    <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
  </div>

</div>

[QuincyLarson]

@ahmadabdolsaheb Excellent work. This looks great! Can you help us design comparably robust challenges for some of these other visual design concepts as well? :)

[ahmaxed]

I will do my best @QuincyLarson. Is there an easy way to check if the assert method is working properly before submitting my comment? thanks

[ahmaxed]

Change the Position of an Element on its Z Axis

Description:

When elements overlap, the lower element in the DOM appears on the top of the other elements. However using the z-index property we can change how elements are stacked on top of one another. You can increase the z-index property of an element to place it to the top of the stack and vise versa.

Instructions

Change the z-index of a the element with the .second-pic class (ace of hearts) so it covers the other element (ace of spades).

Tests:

assert($(".second-pic").z-index() > -1, 'message: Your  second <code>img</code> tag should have the <code>z-index</code> higher than<code>-1</code>.'),

Initial Seed Code:

<style>

  .second-pic{
    position: absolute;
    left: 40px;
    top: 50px;
    z-index: -1;

  }

  /** Only change code above this line. **/

  #avatar {
    display: inline-block;
    margin-top: 20px;
  }
  .img-rounded{
    max-height:200px;
  }

</style>

  <img class="img-rounded" id="avatar" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Aceofspades.svg/2000px-Aceofspades.svg.png" />

  <img class="img-rounded second-pic" id="avatar" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Playing_card_heart_A.svg/2000px-Playing_card_heart_A.svg.png" />

Solution:

<style>

  .second-pic{
    position: absolute;
    left: 40px;
    top: 50px;
    z-index: 1;

  }

  /** Only change code above this line. **/

  #avatar {
    display: inline-block;
    margin-top: 20px;
  }
  .img-rounded{
    max-height:200px;
  }

</style>

    <img class="img-rounded" id="avatar" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Aceofspades.svg/2000px-Aceofspades.svg.png" />

  <img class="img-rounded second-pic" id="avatar" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Playing_card_heart_A.svg/2000px-Playing_card_heart_A.svg.png" />

[ahmaxed]

Create a gradual CSS Linear Gradient

Description:

If you wanna use color transitions (gradients) to your elements, the background property has a linear-gradient() function that comes in handy. Use the following syntax when using linear-gradient()

background: linear-gradient(gradient direction, color 1, color 2, color 3, ...);

The fist argument specifies the direction from which color transition starts and the following arguments specify the order of colors used in the gradient.

Example: background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

Instructions

Use linear-gradient() for the div element in the right and set it so it will display a gradient with a direction of 35 degrees that starts from #ccffff color and end in #ffcccc .

Tests:

assert($('div').css('background') === 'linear-gradient(35deg, #ccffff, #ffcccc)', 'message: Give your <code>div</code> element a <code>linear-gradient</code> <code>background</code> with the specified direction and colors mentioned above.');

Initial Seed Code:

<style>

  div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;      
  }

  /** Only change code above this line. **/

</style>

<div></div>

Solution:

<style>

  div{ 
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: linear-gradient(
    35deg,
    #ccffff,
    #ffcccc
  );       
  }

  /** Only change code above this line. **/

</style>

<div></div>

[HKuz]

Hi folks,

The following posts will have the 'color' challenges (Learn about Complementary Colors through Adjust the Tone of a Color). I tried to keep the text as objective as possible, but color theory can be a bit subjective... Comments and critiques welcome.

I know the first couple challenges are a bit wordy, I did actually time reading them and they all meet the 2 minute criteria :)

[HKuz]

Learn about Complementary Colors

Description:

Color theory and its impact on design is a deep topic and only the basics will be covered in the following challenges. Color can be used on a website to draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can dramatically change the look of a website, and a lot of thought can go into picking a color palette that works with your content.

The color wheel is a useful tool to visualize how colors relate to each other - similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they effectively cancel each other out and result in a gray color. However, when placed side-by-side, these colors will make each other appear more vibrant and produce a strong visual contrast.

Some examples of complementary colors with their hex codes are:

red (#FF0000) and cyan (#00FFFF) green (#00FF00) and magenta (#FF00FF) blue (#0000FF) and yellow (#FFFF00)

There are many color picking tools available online that have an option to find the complement of a color.

Note for all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.

Instructions

Change the background-color property of the blue and yellow classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background.

Challenge Seed

<style>
  body {
    background-color: #FFFFFF;
  }

  .blue {
    background-color: #000000;
  }

  .yellow {
    background-color: #000000;
  }

  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }
</style>
<div class="blue"></div>
<div class="yellow"></div>

Challenge Tests

assert($('.blue').css('background-color') === 'rgb(0, 0, 255)', 'message: Give the <code>div</code> element with class <code>blue</code> the <code>background-color</code> blue.');

assert($('.yellow').css('background-color') === 'rgb(255, 255, 0)', 'message: Give the <code>div</code> element with class <code>yellow</code> the <code>background-color</code> yellow.');

Challenge Solution

<style>
  body {
    background-color: #FFFFFF;
  }

  .blue {
    background-color: #0000FF;
  }

  .yellow {
    background-color: #FFFF00;
  }

  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }
</style>
<div class="blue"></div>
<div class="yellow"></div>

[HKuz]

Learn about Tertiary Colors

Description:

Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory, where red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B), and yellow (R + G). You saw in the Complementary Colors lesson that these secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to them on the color wheel.

Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, red (primary) and yellow (secondary) make orange. This adds six more colors to a simple color wheel for a total of twelve.

[NOTE TO DRAFT: INCLUDING A 12-COLOR RGB COLOR WHEEL DIAGRAM IN THIS LESSON MAY BE HELPFUL]

There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. It starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but is more subtle than using two complementary colors.

Here are three colors using the split-complement scheme:

cyan (#00FFFF) orange (#FF7D00) raspberry (FF007D)

Instructions

Change the background-color property of the orange, cyan, and raspberry classes to their respective colors. Make sure to use the hex codes because the orange and raspberry in the example above are not browser-recognized color names.

Challenge Seed

<style>
  body {
    background-color: #FFFFFF;
  }
  .orange {
    background-color: #000000;
  }
  .cyan {
    background-color: #000000;
  }
  .raspberry {
    background-color: #000000;
  }  
  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }
</style>
<div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>

Challenge Tests

assert($('.orange').css('background-color') === 'rgb(255, 125, 0)', 'message: Give the <code>div</code> element with class <code>orange</code> the <code>background-color</code> orange.');

assert($('.cyan').css('background-color') === 'rgb(0, 255, 255)', 'message: Give the <code>div</code> element with class <code>cyan</code> the <code>background-color</code> cyan.');

assert($('.raspberry').css('background-color') === 'rgb(255, 0, 125)', 'message: Give the <code>div</code> element with class <code>raspberry</code> the <code>background-color</code> raspberry.');

Challenge Solution

<style>
  body {
    background-color: #FFFFFF;
  }
  .orange {
    background-color: #FF7D00;
  }
  .cyan {
    background-color: #00FFFF;
  }
  .raspberry {
    background-color: #FF007D;
  }  
  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }
</style>
<div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>

[HKuz]

Adjusting the Color of Various Elements to Complementary Colors

Description:

The complementary colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.

Instructions

This page will use a shade of teal (#09A7A1) as the dominant color, and its orange (#FF790E) complement to visually highlight the sign-up buttons. Change the background-color of both the header and footer from black to the teal color. Then change the h2 text color to teal as well. Finally, change the background-color of the button to the orange color.

Challenge Seed

<style>
  body {
    background-color: white;
  }
  header {
    background-color: black;
    color: white;
    padding: 0.25em;
  }
  h2 {
    color: black;
  }  
  button {
    background-color: white;
  }
  footer {
    background-color: black;
    color: white;
    padding: 0.5em;
  }
</style>
<header>
  <h1>Cooking with FCC!</h1>
</header>
<main>
  <article>
    <h2>Machine Learning in the Kitchen</h2>
    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
    <button>Sign Up</button>
  </article>
  <article>
    <h2>Bisection Vegetable Chopping</h2>
    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
    <button>Sign Up</button>
  </article>
</main>
<br />
<footer>&copy;2016 FCC Kitchen</footer>

Challenge Tests

assert($('header').css('background-color') === 'rgb(9, 167, 161)', 'message: Give your <code>header</code> element the <code>background-color</code> #09A7A1.');

assert($('footer').css('background-color') === 'rgb(9, 167, 161)', 'message: Give your <code>footer</code> element the <code>background-color</code> #09A7A1.');

assert($('h2').css('color') === 'rgb(9, 167, 161)', 'message: Give your <code>h2</code> element the <code>color</code> #09A7A1.');

assert($('button').css('background-color') === 'rgb(255, 121, 14)', 'message: Give your <code>button</code> element the <code>background-color</code> #FF790E.');

Challenge Solution

<style>
  header {
    background-color: #09A7A1;
    color: #FFFFFF;
    padding: 0.25em;
  }
  h2 {
    color: #09A7A1;
  }  
  button {
    background-color: #FF790E;
  }
  footer {
    background-color: #09A7A1;
    color: #FFFFFF;
    padding: 0.5em;
  }
</style>
<header>
  <h1>Cooking with FCC!</h1>
</header>
<main>
  <article>
    <h2 id="h2-one">Machine Learning in the Kitchen</h2>
    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
      <button id="b1">Sign Up</button>
  </article>
  <article>
    <h2 id="h2-two">Bisection Vegetable Chopping</h2>
    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
    <button id="b2">Sign Up</button>
  </article>
</main>
<br />
<footer>&copy;2016 FCC Kitchen</footer>

[HKuz]

Adjust the Hue of a Color

Description:

Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl() property as an alternative way to pick a color by directly stating these characteristics.

Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360. Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated. Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.

Here are a few examples of using hsl() with fully-saturated, normal lightness colors:

Red: hsl(0, 100%, 50%) (Red can also have a hue of 360) Yellow: hsl(60, 100%, 50%) Green: hsl(120, 100%, 50%) Cyan: hsl(180, 100%, 50%) Blue: hsl(240, 100%, 50%) Magenta: hsl(300, 100%, 50%)

Instructions

Change the background-color of each div element based on the class names (green, cyan, or blue) using hsl(). All three should have full saturation and normal lightness.

Challenge Seed

<style>
  body {
    background-color: #FFFFFF;
  }
  .green {
    background-color: #000000;
  }
  .cyan {
    background-color: #000000;
  }
  .blue {
    background-color: #000000;
  }

  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }
</style>
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>

Challenge Tests

assert($('.green').css('background-color') === 'rgb(0, 255, 0)', 'message: Give your <code>div</code> element with class <code>green</code> the <code>background-color</code> green.');

assert($('.cyan').css('background-color') === 'rgb(0, 255, 255)', 'message: Give your <code>div</code> element with class <code>cyan</code> the <code>background-color</code> cyan.');

assert($('.blue').css('background-color') === 'rgb(0, 0, 255)', 'message: Give your <code>div</code> element with class <code>blue</code> the <code>background-color</code> blue.');

assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), 'message: Use <code>hsl()</code> for the color green.');

assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), 'message: Use <code>hsl()</code> for the color cyan.');

assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), 'message: Use <code>hsl()</code> for the color blue.');

Challenge Solution

<style>
  body {
    background-color: #FFFFFF;
  }
  .green {
    background-color: hsl(120, 100%, 50%);
  }
  .cyan {
    background-color: hsl(180, 100%, 50%);
  }
  .blue {
    background-color: hsl(240, 100%, 50%);
  }

  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }
</style>
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>

[HKuz]

Adjust the Tone of a Color

Description:

The hsl() option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray, while the hue stays the same, or by both tinting and shading. Recall that the 's' and 'l' of hsl() stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.

Instructions

The navigation bar on this site currently inherits its background-color from the header element. Starting with that color as a base, add a background-color to the nav element so it uses the same teal hue, but has 80% saturation and 25% lightness values to change its tone and shade.

Challenge Seed

<style>
  header {
    background-color: hsl(178, 90%, 35%);
    color: #FFFFFF;
  }
  nav {

  }
  h1 {
    text-indent: 10px;
    padding-top: 10px;
  }
  nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
  }
  nav li {
    display: inline;
    margin-right: 20px;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
</style>
<header>
  <h1>Cooking with FCC!</h1>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Classes</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

Challenge Tests

assert($('header').css('background-color') === 'rgb(8, 169, 164)', 'message: Don't change the <code>background-color</code> of the <code>header</code> element.');

assert($('nav').css('background-color') === 'rgb(12, 114, 111)', 'message: Give your <code>nav</code> element a <code>background-color</code> of the adjusted teal.');

assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl/gi), 'message: Use <code>hsl()</code> to state the <code>nav background-color</code>.');

Challenge Solution

<style>
  header {
    background-color: hsl(178, 90%, 35%);
    color: #FFFFFF;
  }
  nav {
    background-color: hsl(178, 80%, 25%);
  }
  h1 {
    text-indent: 10px;
    padding-top: 10px;
  }
  nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
  }
  nav li {
    display: inline;
    margin-right: 20px;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
</style>
<header>
  <h1>Cooking with FCC!</h1>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Classes</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

[ghost]

Adjust the color of an Anchor Tag

Challenge Description

We can adjust the color of anchor tags by specifically targeting the a element in our CSS.

Instructions

Change the color of the anchor tag to #000 (black).

Challenge Seed

<style>

</style>
<a href="https://atjonathan.github.io/catphotoapp">CatPhotoApp</a>

Challenge Tests

assert($('a').css('color') == '#000', 'message: Your anchor tag should be black.')

Challenge Solution

<style>
    a {
        color: #000;
    }
</style>
<a href="https://atjonathan.github.io/catphotoapp">CatPhotoApp</a>

[ghost]

Adjust the Hover State of an Anchor Tag

Challenge Description

Following on from the next challenge, we can change the styling of our anchor tag on hover using the :hover selector.

Instructions

When the user hovers over the anchor tag, the color should be blue and we should remove the underline.

Remember:

You can remove underlining of anchor tags using text-decoration: none.

Challenge Seed

<style>
    a {
        color: #000;
    }
</style>
<a href="https://atjonathan.github.io/catphotoapp">CatPhotoApp</a>

Challenge Tests

assert($('a:hover').css('color') == 'blue', 'message: Your anchor tag should be blue on hover.'),
assert($('a:hover').css('text-decoration') == 'none', 'message: Your anchor tag shouldn't be underlined on hover.')

Challenge Solution

<style>
    a {
        color: #000;
    }
    a:hover {
        color: blue;
        text-decoration: none;
    }
</style>
<a href="https://atjonathan.github.io/catphotoapp">CatPhotoApp</a>

[ghost]

Create visual emphasis by adjusting thebackground-color property of text.

Challenge Description

Instead of adjusting your background or the color of our text to make the foreground easily readable, we can add a background to our text element. We will be using rgba instead of hex codes or normal rgb.

rgba stands for:

1. r (red)
2. g (green)
3. b (blue)
4. a (alpha/level of opacity)

rgba is great to use in this case, as it allows us to adjust the opacity, which means we don't have to completely block out the background.

In this challenge we will be using background-color: rgba(45, 45, 45, .1). This produces a dark gray color and sets the opacity to 0.1.

Instructions

To make our text stand out more, adjust the background-color to rgba(45, 45, 45, .1) on our h4 element. We should also remove the height property and add padding of 10px.

Challenge Seed

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title"><del>Google</del> Alphabet</h4></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title"><del>Google</del> Alphabet</h4></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Create visual emphasis by adjusting the size of a header versus a paragraph tag.

Challenge Description

Header tags should always be larger than paragraph tags. This makes it easier for the user to understand the layout and level of importance of everything on the page.

Instructions

To make our heading significantly larger than our paragraph, change our h4 tag to a h3.

NOTE:

Make sure to update your styling selector too!

Challenge Seed

<style>
    h4 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h3 class="card-title"><del>Google</del> Alphabet</h3></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h3 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Create visual emphasis by making a card like element stand out by adding a box-shadow.

Challenge Description

The box-shadow property applies one or more shadows to an element. This technique can be used on any state, but we are going to apply it on hover. We can add box-shadow to make the card stand out. The simplest way to do this is to use the following css:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Instructions

Add a box-shadow to #thumbnail on hover.

Challenge Seed

<style>
    h3 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h3 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Create a Line Using the hr Element

Challenge Description

We can use the hr tag to add a line through the page. This can be used to define a change in topic or seperate content out.

Instructions

Add a hr tag underneath our h4 with the class of .card-title.

Note

In HTML, <hr has no end tag!!

Challenge Seed

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title"><del>Google></del> Alphabet</h4></strong>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        height: 25px;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h4 class="card-title"><del>Google></del> Alphabet</h4></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[QuincyLarson]

@ahmadabdolsaheb your challenges so far look great.

I don't know of a way to run these tests reliably without importing them into the seed files (which I plan to start doing Aug 21). If your tests don't work, I will create issues to fix them :)

[QuincyLarson]

@HKuz @atjonathan @ahmadabdolsaheb great work so far! Thanks to all your hard work, we are almost half way done with these challenges! Keep up that tempo!

[ghost]

Create visual balance using the text-align property

Challenge Description

In this section of the curriculum, we will be focuing on Applied Visual Design. For a good few challenges, we will be using a Bootstrap Card which we will build on from this challenge forward.

In this challenge, we will be aligning text to the center and left and justifying text. We can use the text-align property in css to complete this challenge.

Instructions

1. Align the h4 tag which says "Google" to the center.
2. Justify the paragraph tag which contains information about how Google was founded.
3. Align the two anchor tags in .card-block to the left.

Note

When you align the two anchor tags, you will see no difference. This is because text is aligned to the left by default.

Challenge Seed

<style>

</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="card-block">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="card-link">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="card-link">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
    }
    p {
        text-align: justify;
    }
    a {
        text-align: left;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="card-block">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="card-link">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="card-link">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

[ghost]

Adjust the Width of an Element Using the width Property

Challenge Description

You can specify the width of an element using the width property in CSS. Here's an example that changes the width of an image to 220px:

  img {
      width: 229px;
  }

Instructions

Change the width of Google's Logo to 75px. You can select the element using the class of .card-img-top.

Challenge Seed

<style>
    h4 {
        text-align: center;
    }
    p {
        text-align: justify;
    }
    a {
        text-align: left;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="card-block">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="card-link">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="card-link">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
    }
    p {
        text-align: justify;
    }
    a {
        text-align: left;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="card-block">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="card-link">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="card-link">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

[ghost]

Adjust the Height of an Element Using the height Property

Challenge Description

Similar to using width, you can specify the height of an element using the height property in CSS. Here's an example that changes the width of an image to 20px:

  img {
      width: 20px;
  }

Instructions

Change the height of the h4 tag to 40px.

Challenge Seed

<style>
    h4 {
        text-align: center;
    }
    p {
        text-align: justify;
    }
    a {
        text-align: left;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="card-block">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="card-link">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="card-link">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h4 {
        text-align: center;
        height: 40px;
    }
    p {
        text-align: justify;
    }
    a {
        text-align: left;
    }
    .card-img-top {
        width: 75px;
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <h4 class="card-title">Google</h4>
        <p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
      </div>
      <div class="card-block">
        <a href="https://en.wikipedia.org/wiki/Larry_Page" class="card-link">Larry Page</a>
        <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="card-link">Sergey Brin</a>
      </div>
    </div>
  </div>
</div>

[ahmaxed]

Use the CSS Transform Property to Scale an Element on Hover

Description:

The transform property has a verity of functions that lets you scale, move, rotate ,skew , etc., your elements. When used with sudo-classes such as :hover that specify a certain state of an element, transform property can easily add interactivity to your elements.

For instance, If you want to scale the paragraph element to 2.1 times of its original size, you can use the transform property in the following manner:

p:hover {transform: scale(2.1);}

Instructions

Use transform property to scale the div element to 1.1 times of its original size when the mouse hovers over it.

Tests:

assert($('div:hover').css('transform') === 'scale(1.1)', 'message: Scale your<code>div</code> element 1.1 times when the mouse hovers over it.');

Initial Seed Code:

<style>

  div{ 
    width: 70%;
    height: 100px;
    margin:  50 auto;
    background: linear-gradient(
    53deg,
    #ccfffc,
    #ffcccf
  );      
  }

  /** Only change code above this line. **/

</style>

<div class ="img-rounded"></div>

Solution:

<style>

  div{ 
    width: 70%;
    height: 100px;
    margin:  50 auto;
    background: linear-gradient(
    53deg,
    #ccfffc,
    #ffcccf
  );        
  }

  div:hover {transform: scale(1.1);}

  /** Only change code above this line. **/

</style>

<div class ="img-rounded"></div>

[ahmaxed]

Use the CSS transform Property SkewX

Description:

Now that we have learned about the scale() function of the transform property, it's time to learn about the skewX() function which skews the selected element along the X axis by a given degree.

The following code skews the paragraph element by -32 degrees along the X axis.

p {transform: skewX(-32deg);}

Instructions

Skew the elements with the hearts ID 24 degrees along the x axis.

Tests:

aassert($('#hearts').css('transform') === 'skewX(24deg)', 'message: Skew the element that has the <code> #hearts </code> 24 degrees.');

Initial Seed Code:

<style>

  .card {
    display: inline-block;
    margin-top: 30px;
  }
  .img-rounded{
    max-height:200px;

  }
  #hearts {

/** Only change code above this line. **/
  }

</style>

  <img class="img-rounded card" id="card" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Aceofspades.svg/2000px-Aceofspades.svg.png" />

  <img class="img-rounded second-pic card" id="hearts" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Playing_card_heart_A.svg/2000px-Playing_card_heart_A.svg.png" />

Solution:

<style>

  .card {
    display: inline-block;
    margin-top: 30px;
  }
  .img-rounded{
    max-height:200px;

  }
  #hearts {
    transform: skewX(24deg);
/** Only change code above this line. **/
  }

</style>

  <img class="img-rounded card" id="card" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Aceofspades.svg/2000px-Aceofspades.svg.png" />

  <img class="img-rounded second-pic card" id="hearts" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Playing_card_heart_A.svg/2000px-Playing_card_heart_A.svg.png" />

[ghost]

Setting the values of heading tags

Challenge Description

In this challenge, we are going to set the values of h1 - h6. This will keep the consistency between each heading tag.

Instructions

1. Set the font-size of the h1 tag to 68px.
2. Set the font-size of the h2 tag to 52px.
3. Set the font-size of the h3 tag to 40px.
4. Set the font-size of the h4 tag to 32px.
5. Set the font-size of the h5 tag to 21px.
6. Set the font-size of the h6 tag to 14px.

Challenge Seed

<style>
    h3 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h3 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    h1 { font-size: 68px; }
    h2 { font-size: 52px; }
    h3 { font-size: 40px; }
    h4 { font-size: 32px; }
    h5 { font-size: 21px; }
    h6 { font-size: 14px; }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Decrease the opacity of an Element

Challenge Description

The opacity property in CSS is used to adjust the transparency or level of opacity for an element.

• 1 wouldn't be transparent at all.
• 0.5 is half see-through.
• 0 is completely transparent.

Instructions

Set the opacity of Google's Logo to 0.9 using the class of .card-img-top.

Challenge Seed

<style>
    h3 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    h1 { font-size: 68px; }
    h2 { font-size: 52px; }
    h3 { font-size: 40px; }
    h4 { font-size: 32px; }
    h5 { font-size: 21px; }
    h6 { font-size: 14px; }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h3 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
        opacity: 0.9;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    h1 { font-size: 68px; }
    h2 { font-size: 52px; }
    h3 { font-size: 40px; }
    h4 { font-size: 32px; }
    h5 { font-size: 21px; }
    h6 { font-size: 14px; }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Create Texture by Adding a Subtle Pattern as a Background Image

Challenge Description

To make our background cleaner and stand out more, we can add a subtle pattern. Make sure you choose a background which doesn't stand out too much, as then it takes away from the foreground!

Note:

Subtle Patterns is a great resource for getting free textures to use for backgrounds.

Instructions

Using the url of https://i.imgur.com/MJAkxbh.png, set the background of the whole page using the body selector.

Challenge Seed

<style>

</style>

Challenge Tests

// TODO

Challenge Solution

<style>
    background-image: url('https://i.imgur.com/MJAkxbh.png');
</style>

[ghost]

Adjust the font-weight of header 1–5 tags.

Challenge Description

After setting the correct font-size of each heading tag, we are now going to set the font-weight.

font-weight sets how thick or thin characters are in a section of text.

Instructions

1. Set the font-weight of the h1 tag to 700.
2. Set the font-weight of the h2 tag to 600.
3. Set the font-weight of the h3 tag to 500.
4. Set the font-weight of the h4 tag to 400.
5. Set the font-weight of the h5 tag to 300.
6. Set the font-weight of the h6 tag to 200.

Challenge Seed

<style>
    h2 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    h1 { font-size: 68px; }
    h2 { font-size: 52px; }
    h3 { font-size: 40px; }
    h4 { font-size: 32px; }
    h5 { font-size: 21px; }
    h6 { font-size: 14px; }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

// TODO

Challenge Solution

<style>
    h2 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    h1 { font-size: 68px; font-weight: 700; }
    h2 { font-size: 52px; font-weight: 600; }
    h3 { font-size: 40px; font-weight: 500; }
    h4 { font-size: 32px; font-weight: 400; }
    h5 { font-size: 21px; font-weight: 300; }
    h6 { font-size: 14px; font-weight: 200; }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title"><del>Google</del> Alphabet</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Use the text-transform property to make text uppercase.

Challenge Description

We can set text to uppercase using the text-transform property in CSS.

Note:

You can also have the values of lowercase, capitalize (transforms the first letter of each word to uppercase), initial (sets the property to the default value), inherit (inherits the property from parent element) and none (default).

Instructions

Set the text inside our h2 tag to be uppercase.

Challenge Seed

<style>
    h2 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title">Google</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

assert($('h2').css('text-transform') == 'uppercase', 'message: Your <code>h2</code> tag should be uppercase.')

Challenge Solution

<style>
    h2 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
        text-transform: uppercase;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title">Google</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ghost]

Using Google Fonts

Challenge Description

Google Fonts is a great way to find free fonts to use in your projects!

Once you have selected the font you want, insert the link tag given into the head. In this case, we have already gone ahead and added Open Sans behind the scenes. The code to include this font is the following:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Now we can include the font in our css by using font-family: 'FONT', FAMILY_NAME. In our case, "FONT" would be 'Open Sans' and "FAMILY_NAME" would be sans-serif.

Instructions

Set the font-family of our body to "Open Sans".

Challenge Seed

<style>
    h2 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
        text-transform: uppercase;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title">Google</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

Challenge Tests

assert($('body').css('font-family') == '/'Open Sans/', sans-serif', 'message: Your page should have the font of "Open Sans".')

Challenge Solution

<style>
    body {
        font-family: 'Open Sans', sans-serif;
    }
    h2 {
        text-align: center;
        padding: 10px;
        background-color: rgba(45, 45, 45, .1);
        text-transform: uppercase;
    }
    p {
        text-align: justify;
    }
    .card-img-top {
        width: 75px;
    }
    #thumbnail {
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
</style>
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="card">
      <img class="card-img-top" src="https://bit.ly/smallgooglelogo" alt="Google's Logo">
      <div class="card-block">
        <strong><h2 class="card-title">Google</h2></strong>
        <hr>
        <em><p class="card-text">Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>
      </div>
      <div class="list-group">
        <u>
          <a href="https://en.wikipedia.org/wiki/Larry_Page" class="list-group-item list-group-item-action">Larry Page</a>
          <a href="https://en.wikipedia.org/wiki/Sergey_Brin" class="list-group-item list-group-item-action">Sergey Brin</a>
        </u>
      </div>
    </div>
  </div>
</div>

[ahmaxed]

Use the CSS transform Property SkewY

Description:

If skewX() function skews the selected element along the X axis by a given degree, can you guess what skewY() does?

Yes, it skews the selected element along the Y axis.

Instructions

Let's see if you can Skew the element with the hearts ID 53 degrees along the Y axis.

Tests:

aassert($('#hearts').css('transform') === 'skewY(53deg)', 'message: Skew the element that has the <code> #hearts </code> 53 degrees.');

Initial Seed Code:

<style>

  .card {
    display: inline-block;
    margin-top: 30px;
  }
  .img-rounded{
    max-height:200px;

  }
  #hearts {

/** Only change code above this line. **/
  }

</style>

  <img class="img-rounded card" id="card" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Aceofspades.svg/2000px-Aceofspades.svg.png" />

  <img class="img-rounded second-pic card" id="hearts" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Playing_card_heart_A.svg/2000px-Playing_card_heart_A.svg.png" />

Solution:

<style>

  .card {
    display: inline-block;
    margin-top: 30px;
  }
  .img-rounded{
    max-height:200px;

  }
  #hearts {
    transform: skewY(53deg);
/** Only change code above this line. **/
  }

</style>

  <img class="img-rounded card" id="card" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Aceofspades.svg/2000px-Aceofspades.svg.png" />

  <img class="img-rounded second-pic card" id="hearts" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Playing_card_heart_A.svg/2000px-Playing_card_heart_A.svg.png" />

[ahmaxed]

I would like to become a co-owner of this topic if possible.

[ghost]

Np :smile:

[alayek]

@ahmadabdolsaheb sure!

@QuincyLarson FYI.

[QuincyLarson]

@ahmadabdolsaheb great! I've granted you write permission for this repository so that we can assign this to you as well, and so that you can modify my original comment up top. (I recommend moving the current list of challenges you're building up into that comment).

[ahmaxed]

@QuincyLarson "Rhythm" at the animation challenges mean movement of a pattern of elements? What do you have in mind?

[QuincyLarson]

@ahmadabdolsaheb I think @JonathanZWhite meant rhythm in design sense: https://www.smashingmagazine.com/2015/04/design-principles-compositional-flow-and-rhythm/

I've tweeted at @jonathanzwhite to see whether he can give us a concise definition and preferably a diagram illustrating this concept.

[JonathanZWhite]

cc @QuincyLarson @ahmadabdolsaheb

Rhythm in design is best described as...

the patterned repetition of elements in space.

An example of rhythm in design would be this picture. Basically, the lines on the wall form a repetitive pattern that creates regular rhythm.

In design for the web, an example of rhythm would be typographical rhythm, the rhythm created by the vertical spacing between lines of text. Ref.

As a challenge, maybe have campers set the line-height of each text tag h1, h2, h3, ..., p as well as their bottom margins.

An alternative exercise to learn rhythm might be to have campers create a navigation bar. In particular, it's important that all of the navigation items are spaced equally. The spacing should create a repetitive and consistent vertical rhythm . I made a quick mock in Sketch to illustrate.

Here are some reference links: http://vanseodesign.com/web-design/visual-rhythm/ https://www.smashingmagazine.com/2015/04/design-principles-compositional-flow-and-rhythm/ https://605.wikispaces.com/Rhythm

[ahmaxed]

Thank you. I really appreciate your explanation. @JonathanZWhite