Answered 
I wrote most of the MDN learning area, so your comment makes me very happy. Thanks!
Hi Chris,
I have noticed a one issue in the comprehensions example.
Part of the background is visible through the footer and header in the corner area.
Any ideas how to fix it?
Here is a picture. I changed color slightly so it is more visible.
Hi there @Henry-Z!
You are right — it took me a few seconds to see what you were talking about, but yes, it does show through a bit
If you want to get rid of this, you could set the border-radius value set on .card to about 1.7em.
1 Like
/* General styles - put these straight into your stylesheet */
body {
margin: 0;
}
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
/* card css */
.card{
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
/* card header */
.card header{
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
border-radius: 1.5em 1.5em 0 0;
}
/* card footer */
.card footer{
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
border-radius: 0 0 1.5em 1.5em;
}
/* card article img */
.card article img{
max-height: 100%;
float: right;
}
/* new ruleset start here */
.card header,.card footer{
height: 3em;
padding: 1em;
}
/* remoove marging h2 p*/
.card h2 ,p{
margin: 0;
}
/* stop image from spilling out the main business card */
.card article{
height: 12em;
background-color: rgba(0,0,0,0.2);
}
.card header h2{
font-size: 2em;
line-height: 1.5;
}
.card footer p{
font-size: 1.5em;
font-weight: 500;
line-height: 2;
}
.card article p{
color: #fff;
padding-left:1em;
padding-top:2em;
}
Hi @selianordev, thanks for submitting your code! This is looking mostly fine; there are just a few minor points that I wanted to talk about:
- The alignment of the address is not just right, and the color is the not the same as the one we used. You used the following rule:
.card article p{
color: #fff;
padding-left:1em;
padding-top:2em;
}
But it should more like this:
.card article p{
color: rgba(255,255,255,0.8);
padding:1em;
}
The color is not a major problem, but the alignment is slightly more serious.
- The text in the footer is slightly different to what we had in our version. Again, this is not a big problem. Looking at your code, it is down to an unneeded
font-weight: 500;declaration in the following rule:
.card footer p{
font-size: 1.5em;
font-weight: 500;
line-height: 2;
}
- You gave your article element a slightly different color to ours:
.card article{
height: 12em;
background-color: rgba(0,0,0,0.2);
}
We used rgba(0,0,0,0.25). But again, this is only a very minor point.
Well done on a good bit of work.
1 Like
Hi @chrisdavidmills, thank you so much for your input … I am going to re-work on that … I real appreciate your comment
thanks
Hello!
I also tried this.
Published on GitHub Pages.
fundamental-css-comprehension
Please give me an evaluation.
Thanks.
Hi there @amaryllis,
I have had a look at your work, and it looks perfect! It works exactly the same as our version, and there is nothing I can really comment on here. Well done on some great work!
1 Like
Hello there!
I tried this assessment, here is the page. I would like to know if it needs something more.
Thanks!
Hi there @Armiixteryx,
I’ve had a look at your code, and it looks pretty much perfect — well done!
The only difference I noticed was that your address text is brighter, but this is definitely a good thing — the contrast was a bit dull on the original.
Thanks for your revision! 
Hi, is there somewhere i can find what the html document should look like, please ? 
Hi there @El_muchacho, welcome to the community.
For this assessment, you can find the source code at https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/
1 Like
Hi, check my code, please
/*General page styles*/
body {
margin: 0;
}
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
h2, p {
margin: 0;
}
/* Card container styles */
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
/* Header and Footer styles */
.card header {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
border-radius: 1.5em 1.5em 0 0;
}
.card footer {
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
border-radius: 0 0 1.5em 1.5em;
}
.card header, .card footer {
height: 3em;
padding: 1em;
}
.card header h2 {
font-size: 2em;
line-height: 1.5em;
}
.card footer p {
font-size: 1.5em;
line-height: 1.75em;
}
/* Main conents styles */
.card article img {
max-height: 100%;
float: right;
}
.card article {
height: 12em;
background-color: rgba(0, 0, 0, 0.5);
}
.card article p {
color: lightcyan;
padding: 1em;
}
/*
Specificity:
.card article img - 12
.card footer - 11
.card header - 11
.card - 10
*/
Hi there @nikolaesku, and thanks for sending your code in!
This looks pretty much perfect, and you’ve got the specificity calculations right.
Your background and foreground colors are different to ours on the central area, but this is better for accessibility purposes.
The only minor thing to mention is that your footer text isn’t quite centered. You used the following:
.card footer p {
font-size: 1.5em;
line-height: 1.75em;
}
Whereas we used this:
.card footer p {
font-size: 1.5em;
line-height: 2;
}
The parent <footer> element’s height is 3em, so if we set the text font-size to 1.5em then use a line-height of 2, we get an overall text height of 3em — the unitless 2 value acts as a multiplier, so the font size of 1.5em is multiplied by 2 to equal a computed line-height value of 3em.
But apart from that, perfect. Well done!
Just a head’s up… this assessment is somewhat “hidden” in the flow of the tutorial list. Even on the page that this assessment sits on, if you look on the left navigation panel, it is not there. And the last tutorial, “Organizing Your CSS”, does not link or lead to it. I happened to find it, and bookmarked it, when I was looking up something else, completely unrelated. I checked the navigation panel to see when it would be coming up, and it wasn’t there. But I figured out where it was supposed to be, and have taken the assessment now.
Oddly, it shows up on the navigation panel on this page: Advanced Styling Effects
But this particular tutorial is another that is not located on the Building Blocks list, nor does anything link up to it.
I just wanted to make sure someone was aware of the serious break in the tutorial flow. It is such a fantastic series.
Thanks for bringing it up!
I have listed it in the main landing page for the Building blocks module, but forgot to add it to the sidebar.
I’ll sort that out now.
Hi @chrisdavidmills, it’s been a while, but I’ve been learning HTML & CSS every night of the last 34 nights 
I’ve finally made my way to the MDN CSS assessments.
Here’s the first one, if you can please mark it:
Live: https://fundamental-css-comprehension.hashbase.io/
Code: https://github.com/Pawper/Fundamental-CSS-Comprehension/blob/master/style.css
Thank you!
Hi @Pawper, nice to hear from you, and glad you’ve been having fun with your learning 
This looks really good — your example does exactly what it is supposed to do, and as a bonus, you’ve changed the background color in the middle section to make the contrast better. Nice work!
1 Like
Hey guys I somehow managed to do this challenge but there’s very minute mistake or bug in aligning the borders of header and footer with the card…
Can someone help me with error ?
https://codepen.io/rohit1101/pen/rNaLpjX?editors=1100
Check out my code in the above link…