"Fundamental CSS comprehension" assessment


(Eman Hosam) #3

Got it. Thank you :slight_smile:


(Adeseyeair3s) #4

I got 50 as a height and I set them to half the box height. so 2.5 em O.o
tho it usually is my thing to solve problems in strange methods. My interpretation of things are very odd
-_-

https://jsfiddle.net/60b3hzye/


(Chris Mills) #5

You are pretty close here. I’d say close enough for now :wink:


(Adeseyeair3s) #6

Ohh! Any thing I should watch for?


(Chris Mills) #7

I’d say try to make sure you use use logical values that divide into easy integers wherever possible, to make such calculations easier to handle. You won’t always avoid it, but it is annoying having to use values like 1.41333333333333338em :wink:


(Krys) #8

Hi! Just finished the Fundamental CSS comprehension assessment. May I please have the marking guide so I can check my work? Feedback is also welcomed if anyone has the time. Thanks!

/* 
Specificity of selectors:
    .card article img = 12
    .card footer = 11
    .card header =11
    .card = 10
*/


/* General styles that apply to the entire document */
body {
  margin: 0;
}

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


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

/* Styles for the header/footer of the card */
.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 {
  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 header, .card footer {
    height: 3em;
    padding: 1em;
}

/* Styles for the main content of the card */
.card article img {
  max-height: 100%;
  float: right;
}

.card h2, .card p {
    margin: 0;
}
.card h2 {
    font-size: 2em;
    line-height: 1.5em;
}

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

.card article {
    height: 12em;
    background: rgba(0,0,0,0.2);
}

.card article p {
    padding: 1em;
    color: lightgrey;
}

Learning web development: Marking guides and questions
(Chris Mills) #9

Hi there,

Well done for finishing the Fundamental CSS Comprehension! You can find the marking guide here:

And the final finished version is here:

https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/

Let me know if you have any more questions.


(Filip sky) #10

Hi Chrismills

Could you give me feedback on fundamental CSS test,please?

here is CSS code

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

/* Selectors to be matched up with rulesets */

.card article img {
max-height: 100%;
float: right;
}

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

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

/* info about card holder*/
.card article {
height: 12em;
background-color: rgba(0,0,0,0.2);
color: antiquewhite;
padding-left: 1em;
}

/* card holder name*/
.card h2 {
font-size: 2em;
line-height: 25px;
}

/* card holder footer info*/
.card footer p {
font-size: 1.5em;
line-height: 5px;
}

.card h2, p {
margin: 0 auto;
}

.card p {
padding-top: 10px ;

}

.card footer, header {
height: 5em;
padding: 1em;
box-sizing: border-box;
}


(Chris Mills) #11

That looks really good - congratulations! You’ll see that it is pretty close to our finished version (https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/).


(Jey And Key) #12

Doing the fundamental CSS comprehension, and I belief the assignment is broken, like nowhere does it mention to make paragraph white or has it in starting CSS. I’m also confused about instruction asking for 50px in em since font was changed and it’s unclear if you like the absolute 50px or 50px equivalent accounting for changed font which is as silly. Would it be possible to also publish the answer?


(Chris Mills) #13

Hi there!

To answer your first point, I am talking about the overall computed height as being 50px. I’ve updating the wording to hopefully make this a little clearer.

To answer your second point, we do say “set its color to be fairly light so it is easy to read.”

The answer is published at https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/


(Jey And Key) #14

The column part of the guide uses floats, when columns are supported since 2 years ago.


(Chris Mills) #15

I’m assuming you are talking about CSS multi-column layout? You are right that this is supported well now, but it is not that useful for true multi-column layouts - such uses are better served by Flexbox, or floats if older browser support is needed.

Multi-column layout is useful for displaying single bodies of text in multiple columns, like a newspaper layout for example, but it doesn’t work for multiple columns currently - it is very hard to control where the columns break.


(Matt) #16

I’m looking for feedback about my work on the Fundamental CSS Comprehension exercise. I’m not sure if my footer is aligned perfectly but I can’t figure out how to fix it. Also my background colors seem a bit off.

body, h2, p, article, img, section {
  margin: 0;
  padding: 0;
}

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

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

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

h2 {
	font-size: 2em;
}

/* Rulesets to be matched up with selectors */

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

/* Rulesets for header and footer */

.card header {
	height: 3em;
	margin: 0;
}

.card header {
  background-image: linear-gradient(to bottom,rgba(255,0,0,0.4), rgba(255,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
  padding: 1em;
}

.card footer {
  background-image: linear-gradient(to bottom,rgba(255,0,0,0), rgba(255,0,0,0.4));
  border-radius: 0 0 1.5em 1.5em;
  height: 3em;
  padding: 1em;
  margin: 0;
}

.card footer p {
	margin: 0;
	font-size: 1.5em;
}

/* Rulesets for main card content */

.card article img {
  max-height: 100%;
  float: right;
}

(Chris Mills) #17

Hi Matt,

From a cursory look, your code looks like it is definitely nearly there. Also, don’t be too worried if the colors are slightly off, as long as you have the basic ideas right.

You can check your code against ours, see:


(Mauro Di Bert) #18

@chrismills thanks for all your help! I’ve just had something that still don’t understand: and wanted to ask you:

  • why if the height of the card header and card footer are absolute, is it useful to use relative unitless line-height values?
  • why is the total height of both 50 and not 60?
  • maybe too silly question but what differs from setup card container and main content?

Thanks a lot!


(Chris Mills) #19

So, unitless line-height values are useful because they size the line height relative to the font-size, so if you change the font-size the line-height will stay correct relative to what it was before. Also, it is a useful way of centering the text inside the line.

The total height is 50 because you’ve got a content height of 30, and then a top and bottom padding of 10 — 30 + 10 + 10 = 50. The easiest way to visualize this is to use the developer tools’ visual box model display:

As for the last point, I’m not 100% sure what you mean — are you asking why we have a <section class=“card”></section> wrapper present in the example?


(Mauro Di Bert) #20

@chrismills thanks for the answer! I’ve fully understood it right now! hehe. And about was I was talking with sections is that we had to put four comments on the CSS in order to divide the different rulesets to organize the code but I don’t find visible differences between card setup and main content. It’s something really fullish maybe but I like to understand!!! hehe.

Thanks, man!!!


(Mauro Di Bert) #21

@chrismills could you help me with this? I’m sorry if this is not the proper way but it’s what i found being really newby! Tks!:


(A.J.) #22

Hello,
I have a question concerning line-height and how it works.
When I’ve reached the question about sizing the line-height I’ve tried to experiment to understand how it works. But without success.
If we follow exercise we have a h2 element inside a header element who has set height property to 3em(30px) and padding to 1em(10px). So I’ve tried to experiment and see how my h2 element will align in the content area of header element. h2 set to have margin = padding = 0 and I’ve set the font-size of the text inside h2 element to be 3em(30px) to occupy whole content area. I thought this should align the text in the content area. But without success.
The problem if I do not understand how line-height or text inside and element (who’s in his turn inside an element header) work further work with HTML and CSS will get more confusing.
Can some one explain how line-height behave? I have impression that there is some hidden line-height by default. But even when I unset line-height the 30px text wont align in the header element.
Thanks.firefox_line_height_wtf