Evaluation required for creating a fancy letterheaded paper

MDN Learn
#1

Hello sir , here is he assignment, Creating fancy letterheaded paper - Learn web development | MDN (mozilla.org)

And this is my attempt . A Pen by Cleo (codepen.io)

#2

Hi again, @Cleo_Shepsut

Very well solved!
Here are some comments:

  • To have the gradient over the others, it needs to go first, not last
  • Instead of defining background-image background-position and background-repeat you could also group these properties with a background property to easier see what belongs to what. This could then look like this:
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.2)),
            url(top-image.png) no-repeat left top,
            url(bottom-image.png) no-repeat left bottom;
  • Generally it would massively improve readability if you could format your code better:
    • selector and curly brace on their own line
    • every property on its own line and indented
    • curly brace on its own line
    • Example from the CSS intro:
      h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Keep up the good work! :slightly_smiling_face:

Stay safe,
Michael

#3

Hello sir, thanks very much for the assessment and suggestions, I have followed your instructions as you can see, but I got issues with two aspects ,

  1. Whenever I make the gradient to go first, the background images become invisible can’t be seen , but when I make it go last that’s when all the images become visible and the final product obtained .
  2. I find it difficult to upload , images downloaded to my local browser on this given codepen editor, that’s why the logo is uploaded and the other two images cant be uploaded .
    Could you help me please ?
#4

Hi Cleo

You can’t upload images to CodePen. The difference between the logo and the other images is that you used the absolute URL (starting with https://) for the logo. This directly takes the image from the MDN GitHub page. You can do the same with the other images and copy the URL from the task page:

2022-06-26 16_27_33-Creating fancy letterheaded paper - Learn web development _ MDN
2022-06-26 16_27_33-Creating fancy letterheaded paper - Learn web development _ MDN804Ă—697 51.5 KB

Your code should then be like this and everything looks correct:

background: linear-gradient( to bottom, rgba(0, 0, 0,  0.5) 10%, rgba(255, 255, 255, 0.5) 20% 80%, rgba(0, 0, 0, 0.5) 100%),
            url(https://raw.githubusercontent.com/mdn/learning-area/main/css/styling-boxes/letterheaded-paper-start/top-image.png) no-repeat top,
            url(https://raw.githubusercontent.com/mdn/learning-area/main/css/styling-boxes/letterheaded-paper-start/bottom-image.png) no-repeat bottom;

That probably happened before you used the background shorthand. The browser didn’t know which background-position and background-repeat it should use for which background-image. Another reason why it’s a good idea to always use the shorthand property and having everything together. :slightly_smiling_face:

#5

Thanks very much sir, for providing the assessment correction and opinions, I will always follow your advice .

1 Like