"Fundamental CSS comprehension" assessment

MDN Learn
#32

Thank you for your response

#33

Hi Chris,

Thanks for your reply. This is ancient stuff now as I didn’t log into here for a while, but any guess why this didn’t work with my original rule #2 (.card header h2, and .card footer p)? It’s basically the same thing with 1 more item added in the selector chain for specificity, right? Or am I missing something crucial?

Also, is the last thing in the assessment (getting the main paragraph to be padded) calculated to be exactly 1em, or is this just pretty much “eyeballed” to look right?

Kind Regards,
Martin

#34

Hi Martin,

Hrm, you’ve got a point here. I seemed to miss your high-specificity rule that was doing the same thing. I’m not sure now, and would have to go back and revisit it at some point.

As for the padding thing — this is calculated exactly, but the calculation is easy. The header and footer both have padding on 1em set on them, so giving the paragraph padding of 1em makes them line up nicely.

#35

Hi, Chrismills, could you give me any feedback on my fundamental CSS comprehension assessment? Here is CSS code

/* General page styles */

body {
  margin: 0;
}

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

/* card container */
/*0010*/
.card {
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

/* header and footer */
/*0011*/
.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;
}

/*0011*/
.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;
}

/* main business card contents */
/*0012*/
.card article img {
  max-height: 100%;
  float: right;
}

/* new rules */
.card header, .card footer {
    height: 3em;
    padding: 1em;
}

h2, p {
    margin: 0;
}

article {
    height: 12em;
    background-color: rgba(0,0,0,0.25);
}

h2 {
    font-size: 2em;
    line-height: 1.5;
}

footer p {
    font-size: 1.5em;
    line-height: 2;
}

article p {
    padding-top: 1.8em;
    padding-left: 1em;
    color: white;
}

And I also have some questions. I don’t know how to use column combinator even if I had read the “Combinators and group selector”. And I also don’t know the difference between [attr|=val] and [attr^=attr], it seems that they both select all elements with the attribute attr for which the value starts with val. Could you help me solve this two questions?

#36

Hi @Tom-Vanderboom!

I have looked at your code, and it looks really good; pretty much spot on except that the padding of the contract details was a bit off. You used this rule to style it:

article p {
    padding-top: 1.8em;
    padding-left: 1em;
    color: white;
}

If you changed it to

article p {
    padding: 1em;
    color: white;
}

It would be centered better (or we could use flexbox for even more accuracy). But it is a pretty minor point — great work overall!

Now on to your questions:

  1. The column combinator is an experimental new selector designed to allow you to select items inside a certain column in an HTML table. But this is currently very experimental and doesn’t seem to work anywhere yet except experimental browser builds. This is not helpful to learning about selectors, so I’ve removed it.

  2. The stuff about attribute selectors is all in https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors, but there are quite a lot of options and it takes a while to digest the differences between all of them. The difference between these two is quite subtle:

  • [attr^=val] matches any element with an attribute attr that has the string val at the start of its value. This is a more general case.
  • [attr|=val] matches any element with an attribute attr that has the string val- at the start of its value, OR, has the string val as its entire value. This was added to CSS specifically to handle language codes, e.g. you can use it to match lang="en" or lang="en-US".

You’re probably unlikely to use the second one very often, if ever. To make it clearer that this is a specialist option and not very commonly-used, I’ve moved it out of the main list in the article, and put it as a note below.

#37

Thanks for answering! I have got it. Ummm, I also want to get some guidance in my structuring planet data assessment. Could you give me some advice?
Besides, I love study in MDN, I think that the person who wrote the document is really excellent!:smiley:

#38

Answered :wink:

I wrote most of the MDN learning area, so your comment makes me very happy. Thanks!

#39

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.

[Album] MDN CSS assessment border issue

#40

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 :wink:

If you want to get rid of this, you could set the border-radius value set on .card to about 1.7em.

1 Like
#41 
/* 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;

}
#42

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.

  1. 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;
}
  1. 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
#43

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

css_business_card_Mozila_Developer
css_business_card_Mozila_Developer.png1366×728 112 KB
#44

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

#45

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
#46

Hello there!

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

Thanks!

#47

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.

#48

Thanks for your revision! :+1:

#49

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

#50

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
#51

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