https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension

Cleo_Shepsut · June 12, 2022, 4:07am

Hello good people here is the link of the giving homework Fundamental CSS comprehension - Learn web development | MDN (mozilla.org). and here is the link of my attempted solution A Pen by Cleo (codepen.io). My problems are first I can’t identify the two given errors , then I set the rules for the article background but yet red background on footer and header can’t be highlighted , and finally I don’t know what rule to set for the article image to be uploaded on the card. Please help me .

schalkneethling · June 13, 2022, 2:31pm

Hey @Cleo_Shepsut,

Let’s take this step by step:

First of all the text below was probably accidentally copied:

© 2022 GitHub, Inc. Terms Privacy

When using a tool such as Codepen, the HTML area expects just the HTML that is inside the opening and closing body element. I have created a Gist on GitHub showing your current code before, and what can be used in Codepen (the after.html Gist)

gist.github.com

https://gist.github.com/schalkneethling/6263f9d58132cf23a38960786aabcc55

after.html

<section class="card">
  <header>
    <h2>Chris Mills</h2>
  </header>
  <article>
    <img
      src="chris.jpg"
      alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat"
    />
    <p>

This file has been truncated. show original

before.html

<body>

  <section class="card">
    <header>
      <h2>Chris Mills</h2>
    </header>
    <article>
      <img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p>50 My Street<br>
         The Town<br>

This file has been truncated. show original

Once you have updated your Codepen with this change let me know what the next stumbling block is for you. Don’t give up, you got this!

–
Schalk
Staff Community Manager - MDN Web Docs

Cleo_Shepsut · June 13, 2022, 2:48pm

hello thanks , have adjusted html at Codepen .

Cleo_Shepsut · June 13, 2022, 3:58pm

Check my Codepen , next problem how to identify the two given errors and correct them ?

Cleo_Shepsut · June 14, 2022, 2:30am

Hello sir ,
Please check this out A Pen by Cleo (codepen.io) The background red color can’t highlight , and the photo doesn’t upload .

schalkneethling · June 16, 2022, 4:45pm

Hey there,

For the image not loading, you might have missed this bit on the assessment page:

Alternatively, you could use a site like JSBin or Glitch to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use this URL to point the <img> element to the image file.

So where you currently have just chris.jpg, you want to replace that with https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg

Not sure which part is not highlighting in red but, I can see a couple of things with the CSS:

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

If you look at the above block you will notice that you have a background-image: property but no value specified. Then, a general best practice tip is that when a value is 0, there is no need to specify the unit. For example here:

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

You can write it as:

.card h2 {
  margin: 0; /* notice the difference here */
  font-size: 2em;
  line-height: 2;
}

–
Schalk
Staff Community Manager - MDN Web Docs

Cleo_Shepsut · June 17, 2022, 1:40am

Thanks very much for your concern sir, and sorry for my slowness to understand , I have uploaded the image, and did some changes. i 'am still afraid that my attempt is not completely perfect. A Pen by Cleo (codepen.io).

mikoMK · June 25, 2022, 5:37pm

This looks good now, @Cleo_Shepsut
Congratulations!