"Fundamental CSS comprehension" assessment

eman_hosam · January 22, 2018, 9:55pm

Got it. Thank you

Air3s · January 22, 2018, 9:55pm

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/

chrisdavidmills · January 22, 2018, 9:55pm

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

Air3s · January 22, 2018, 9:55pm

Ohh! Any thing I should watch for?

chrisdavidmills · January 22, 2018, 9:55pm

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

kookiekrysp · January 22, 2018, 9:55pm

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

chrisdavidmills · January 22, 2018, 9:56pm

Hi there,

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

github.com

mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/marking-guide.md

# Marking guide for "Fundamental CSS comprehension"
The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Fundamental CSS comprehension](https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.

The overall mark awarded is out of 35. Work out their final mark, and then divide by 35 and multiply by 100 to give a percentage mark. For reference, you can find a [finished business card](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/) that would be awarded top marks.

## Basic setup

<dl>
<dt>"create a new file in the same directory as your HTML and image files" (1 mark)</dt>
<dd>The first task — creating your CSS file — is only worth one mark. It is pretty easy, although you won't be able to do much without getting this right.</dd>
<dt>"Link your CSS to your HTML file via a <code>&lt;link&gt;</code> element" (2 marks)</dt>
<dd>Slightly more challenging, but again pretty easy.</dd>
<dt>"copy and paste them into the top of your new CSS file. Use them as a test to make sure your CSS is properly applied to your HTML." (1 mark)</dt>
<dd>This is just copy and paste, so not really worth much.</dd>
<dt>"Above the two rules, add a CSS comment with some text inside it to indicate that this is a set of general styles for the overall page. "General page styles" would do. Also add three more comments..." (2 marks)</dt>
<dd>Good commenting is important. You should award 0.5 marks for each of the four comments, as long as they are written in a sensible place with meaningful text.</dd>
</dl>

This file has been truncated. show original

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 · January 22, 2018, 9:57pm

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

chrisdavidmills · January 22, 2018, 9:57pm

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/).

janat08 · January 22, 2018, 9:58pm

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?

chrisdavidmills · January 22, 2018, 9:58pm

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/

janat08 · January 22, 2018, 9:58pm

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

chrisdavidmills · January 22, 2018, 9:58pm

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.

nydybbuk · January 22, 2018, 9:59pm

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

chrisdavidmills · January 22, 2018, 9:59pm

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:

Marking guide:
Source code: https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/style.css
Live version: https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/

maurodibert · January 22, 2018, 11:28pm

@chrisdavidmills 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!

chrisdavidmills · January 22, 2018, 11:28pm

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?

maurodibert · January 22, 2018, 11:28pm

@chrisdavidmills 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!!!

maurodibert · January 22, 2018, 11:28pm

@chrisdavidmills 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!:

RickSanch3z · February 18, 2018, 4:34pm

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