"Fundamental CSS comprehension" assessment

[chrisdavidmills]

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:

1. 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.

2. 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;
}

3. 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.

[selianordev (Selianordev Lusukama)]

Hi @chrisdavidmills, thank you so much for your input … I am going to re-work on that … I real appreciate your comment
thanks

[amaryllis]

Hello!
I also tried this.
Published on GitHub Pages.
fundamental-css-comprehension
Please give me an evaluation.
Thanks.

[chrisdavidmills]

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!

[Armiixteryx (David)]

Hello there!

I tried this assessment, here is the page. I would like to know if it needs something more.

Thanks!

[chrisdavidmills]

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.

[Armiixteryx (David)]

Thanks for your revision!

[El_muchacho (Sylvaintison59)]

Hi, is there somewhere i can find what the html document should look like, please ?

[chrisdavidmills]

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/

[nikolaesku (Inicolaescu1)]

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
*/

[chrisdavidmills]

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!

[mbrasseau]

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.

[chrisdavidmills]

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.

[Pawper (Phillip A Wessels)]

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: Fundamental-CSS-Comprehension/style.css at master · Pawper/Fundamental-CSS-Comprehension · GitHub

Thank you!

[chrisdavidmills]

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!

[srohit1101 (srohit1101@gmail.com)]

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…

[chrisdavidmills]

Hi there @srohit1101!

Your problem here stems from the fact that you’ve got the card class set on not only the <section> element, but also the <header> and <footer> elements too. So the styles applied to the overall card are being applied to those elements too, leading to some strange visual effects.

Removing the card class from <header> and <footer> should solve most of your problems.

After that, you can probably simplify your CSS too, as you won’t need the stuff that is trying to override the card styles.

[R1C4RD0]

you are so kind,thank you very much

[Vlad1 (Vlad Chepurko)]

/* General styles */

body {
margin: 0;
}

html {
font-family: ‘Helvetica neue’, Arial, ‘sans serif’;
font-size: 10px;
background-color: #ccc;
}

article img {
width: 82px;
float: left;
margin-right: 5px;
}

footer p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
letter-spacing: 1px;
background: linear-gradient(to right, #876180, #c08d66);
border: 1px solid black;
border-radius: 7px;
padding: 3.5px;
color: white;
}

article p {
letter-spacing: 1px;
}

header h2 {
color: rgb(255, 255, 255);
font-size: medium;
letter-spacing: 0.5px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
font-weight: initial;
background: linear-gradient(to right, #876180, #c08d66);
text-align: center;
border: 1px solid black;
border-radius: 5px;
}

/* Container */
.main-box {
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 5px;
margin: auto;
margin-top: 10px;
padding: 10px;
box-shadow: 5px 3px 5px rgb(89, 85, 85);
background-color: rgb(221, 185, 167);
}

[Vlad1 (Vlad Chepurko)]

@eman_hosam

In the assessment: “Fundamental CSS comprehension”,
I didn’t know how to calculate the appropriate line-height to make the

centralized in header and footer

Go to the developer tools and find the line-height value, write different values ​​there and find what you need, and then add this value to your property in the code