Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Gradients

Muhammad Sharjeel
Muhammad Sharjeel
2,992 Points
Posted by Muhammad Sharjeel
Muhammad Sharjeel
2,992 Points

code challenge task 3 give me a error.How to remove the error?

one i submit the task 3 it give me a msg well done and i move on to the next task 4. But when i subit the task4 it give ma a error .opps the task 3 answer is not correct what i am do.

style.css 
/* Complete the challenge by writing CSS below */
.main-header{
  background-image: linear-gradient (steelblue, darkslateblue);
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->
  </body>
</html>

1 Answer

Robert Howington
Robert Howington
1,787 Points
Robert Howington
Robert Howington
1,787 Points

Don't worry, you don't need to change much within the linear-gradient function.

Whats important to know, is that you are only adding 2 pieces of information so you can complete the last task.

The first: 'Set the second color stop's position to 90%' If you recall, you will put the color-stop percentage right after the color it references, like so:

linear-gradient(green, blue 45%)

The Second: 'Add value that sets the gradient direction from bottom to top'

There are 2 ways to do this, and MDN documentation is confusing but you can read up on it at W3C CSS gradients

Either use:

  1. 0deg
  2. 'to top'
linear-gradient(0deg, purple, blue)

Now put all of that together.

Muhammad Sharjeel
Muhammad Sharjeel
2,992 Points
Muhammad Sharjeel
Muhammad Sharjeel
2,992 Points

Thank you Robert Howington.