Use the CSS Transform Property skewX to Skew an Element Along the X-Axis

HTML-CSS
#1

The lesson is to skew the bottom element 24deg. When I run the test, the block skews but I get a message saying the bottom element should be skewed. It looks like it works. Why the problem?

Your code so far


<style>
  div { 
    width: 70%;
    height: 100px;
    margin:  50px auto;
  }
  #top {
    background-color: red;
  }
  #bottom {
    background-color: blue;
    transform: skewx(24deg)
    
  }
</style>

<div id="top"></div>
<div id="bottom"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis

#2

You need to fix 2 things in your code.

  1. write skewx as skewX(24deg)
  2. add semi-column in the end.
2 Likes
#3

Thanks. Do you know why in CodePen it works without the capital X and without the semi-colon?

#4

no need to add semi colon in the last property.
you need to add
-ms-transform: skewx(24deg); /* IE 9 /
-webkit-transform: skewx(24deg); / Safari /
-moz-transform: skewx(24deg); / firefox*/

#5

It’s all about best practices and code quality.
Yes, the code will work in Codepen or in any other editor and you are here to learn not only coding but also to write good code that’s why FCC is not passing the test.

In some of the challenges, you will not pass the test if you use single ’ ’ quotes instead of double " " quotes.

@spjindal90
a semi-colon is required unless if it’s not the last property and it’s a best practice to add.

some HTML5 elements don’t need you to add an auto close in the end but still it not a best practice.

example:

<img src='./src/untitled.jpg' > this will work fine in HTML but in react it will through an error and so as in strict XHTML. If you don’t learn the best practices at some point you may have to debug someone else written code and you are not aware of these things then you will be in a stressful situation.
<img src='./src/untitled.jpg' />

For example, if you are working in ReactJS then, the compiler will yell at you.

2 Likes
#6 
<style>
  div { 
    width: 70%;
    height: 100px;
    margin:  50px auto;
  }
  #top {
    background-color: red;
  }
  #bottom {
    background-color: blue;
    transfrom: skewX(24deg);
  }
  
</style>

<div id="top"></div>
<div id="bottom"></div>

Anyone have any idea why this is failing? I can’t see anything wrong with it?

1 Like
#7

Typo in Transform! Resolved now.

1 Like
#8

Anyone willing to help ?

Have tried everything in here, still not responding. The thing is that the desired effect is being applied but the exercise never shows as complete when running tests,

Here, let me add the code:

<style>

div {

width: 70%;

height: 100px;

margin: 50px auto;

}

#top {

background-color: red;

}

#bottom{

background-color: blue;

-moz-Transform:SkewX(24deg);

}

</style>

<div id=“top”></div>

<div id=“bottom”></div>

#9

I was having a “Brain Fart” and couldn’t remember what to do until i ran into your post. So Thank you for Clearing up this exercise. :sunglasses:

#10