Build a Tribute Page. Need technical explanation

Web Development Bootcamp
1

Screenshot_2
Screenshot_21371×531 79.2 KB

Please explain why validation doesn’t accept styles. Is everything described correctly or not? See screenshot in attachment

1 Like
2

Hi @stanislavstar2204484 and welcome!

Not sure. Try to wrap all the styles for the image inside #image selector. Also you could try to paste all your code in your post using </> icon. It would be easier to help you.

Good luck!! Happy coding!

1 Like
3

post your code so, we can know exactly how to fix it as @carlost2672543 has suggested.

Here is my little tribute page design: here

and here is my code: here

Any suggestion on how to improve are welcome. :pray:

2 Likes
4

Hi Stanislav,

We had a similar non-explained (or so we thought) issue in discord too, and it ultimately appeared that an element earlier in the code was messing with the tests (it was the title in the head section). Please check all of the code carefully the error may be caused earlier and the tests can be confused by that.

As suggested, you could put your code up in a public place (replit, codepen, gist etc) so we can help you better.

5

Thanks everyone for the help! It’s great to see such a response. I found the problem, everything is fine now. Thanks again!

2 Likes
6

Hi Rotimi @Timiphil

It looks great already!

Read others code is not easy so just take the everyones feedback as suggestions. I few ideas for now, you could post your code again if you want, and we will try to suggest more things.

You could test your code:

  • try to zoom in and out your code, you will see how it breaks
  • shrink browser’s viewport
  • open Browser Dev Tools and click mobile mode to see your code for small devices, usually it is easier to code for them, and when you finish your code will look yet pretty good at bigger screens
  • look your CSS in browser’s Dev Tool to see if everything is working as you expect, check and uncheck CSS properties to make test, for example, too

About code:

  • consider using this code to see your boxes *, * > * { outline: 2px solid pink; }. I use outline and not border because the first one doesn’t interfere with the layout
  • consider to size your body first
  • consider display: flex; flex-flow: column nowrap; but in your body element or other container too, but you might not need it
  • use width and height wisely; consider min-width and max-width
  • in main you don’t need a width: 100vw;
  • remember that you can center boxes using margin: 0 auto;, sometimes you won’t need flexbox or grid for that
  • be careful with overflow: hidden; it can cause more troubles than good
  • consider use rem units for font-size and em for margin and padding; em will use the element’s font-size as starting point (this means that if 1 rem = 19px inside that element, then .5em = 9px)
  • you could wrap main and footer inside a div and give it max-width to avoid block elements take all the width (100%)
  • consider using max-width: 100%; for img element and limit its parent size, you might need object-fit CSS property to control your image after
  • for your .tribute-info I would use more paragraphs; shorter paragraphs are easier to read, 100% width paragraph are not easy to read either
  • I don’t think you will need z-index and position: relative; in your code

Accesibility:

  • consider to use other colors (more contrast between text’s background and text color) to help readers go throw your text easily
  • consider line-height or other CSS properties to make your text easier to read.

Design:

  • consider using a shadow instead a border around your image, you could make it -px spread on hover, for example
  • I think it is clean, a lot of white space, everyone like that
  • consider put more margin and padding, even more white spaces :ok_hand:
  • check you margins and padings when you try to break your layout

Ok, this is a lot, lol. I am not trying to discourage you. All that are just ideas to play around. :wink:

Great job!! It seems everyones is doing better than me :laughing: Good for all of you :v:

P.S. Remember!! I can be wrong, so don’t forget to check your code in browser’s dev tools.
Sorry if my english, syntax, and line of thinking is not specially good right now ; I am still recovering from covid or flu, not sure. Some days I am sleepier than others :sweat_smile: :rofl:

3 Likes
7

Thank you so much for your insight. I will consider all the points. Wishing you a great recovery. :pray:

2 Likes
8

Thank you Rotimi

I forgot something… text-align: start; is better than justify in general: easier to read.

Also, it is better for accesibility as well. I will cite MDN here:

Accessibility concerns

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

Probably you will use the justify value only if you try to replicate a newspaper layout.

Happy coding!

2 Likes
9

Hello Carlos,
help to check this code :

/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */
*,
* > * {
  /* outline: 20px solid pink; */
  margin: 0;
  padding: 0;
}
body {
  min-width: 100vw;
  min-height: 100vh;
  size: 1.5rem;
  display: flex;
  flex-flow: column nowrap;
}
.whole {
  max-width: 100%;
}
main {
  background: url(./images/bg-pattern-top.svg), hsl(185, 75%, 39%);
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}
#title {
  font-size: 1.05rem;
  text-align: center;
  padding: 1em 4em 0.5em;
  line-height: 40px;
  margin-bottom: 1em;
  color: #fff;
}
#img-div {
  max-width: 100%;
}
#image {
  max-width: 30%;
  min-width: 30%;
  object-fit: contain;
  height: auto;
  display: block;
  margin: auto;
  background: url(./images/bg-pattern-card.svg);
  box-shadow: 0px 8px 24px hsl(185deg 74% 27%);
  border-radius: 50%;
}
#image:hover {
  -moz-box-shadow: 0px 8px 24px hsl(185deg 74% 27%);
  transform: scale(1.05);
  -webkit-box-shadow: 0px 8px 24px hsl(185deg 74% 27%);
  box-shadow: 0px 8px 24px hsl(185deg 74% 27%);
}
#img-caption {
  font-size: 1.05rem;
  text-align: center;
  margin: 0 auto;
  font-weight: 700;
  color: #fff;
  padding: 1em 0;
}
#tribute-info {
  font-size: 1.05rem;
  text-align: start;
  padding: 1em 2em;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 1px;
}
/* styling the attribution */
.attribution {
  position: relative;
  font-size: 1rem;
  bottom: 2vh;
  left: 50%;
  text-align: center;
  color: rgb(220, 220, 240);
  transform: translate(-50%);
  z-index: 10;
  padding: 1em 1em 0 2em;
}
.attribution a {
  color: hsl(228, 45%, 44%);
  cursor: pointer;
  text-decoration: none;
}

html……

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="styles.css">

 <!-- Google Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">

 <title>Michelle Obama</title>
</head>

<body>
 <div class="whole">
 <main id="main">
  <h1 id="title">Michelle Obama</h1>
  <figure id="img-div">
   <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Michelle_Obama_2013_official_portrait.jpg"
    alt="former first lady of USA, Michelle Obama" id="image">
   <figcaption id="img-caption">First lady of USA</figcaption>
  </figure>
  <p id="tribute-info">
   Michelle LaVaughn Robinson Obama[1] (born January 17, 1964) is an American attorney and author who served as first lady of the United States from 2009 to 2017. She was the first African-American woman to serve in this position. She is married to former President Barack Obama. An Ivy League graduate <a
    href="https://www.history.com/topics/first-ladies/michelle-obama" id="tribute-link" target="_blank">she built a successful career</a>, first as a lawyer, and then in the private sector, which she maintained throughout her husband’s early political career.
  </p> 
  <p id="tribute-info">
   She was initially hesitant to endorse the notion of her husband running for president because she was worried about how the campaign would affect their young girls. Despite her initial reservations, she ended up becoming a successful campaign surrogate for him. She decided to promote a number of causes when her husband was elected, including helping military families and promoting healthy eating to combat the pandemic of childhood obesity.
  </p> 
  <p id="tribute-info">
   Michelle Obama established herself as a role model for many Americans as a young mother, a fashion queen, and the first First Lady of African Americans. Michelle co-founded the Joining Forces program in 2011 with the goal of increasing the educational and job opportunities
   for veterans and bringing attention to the issues that military families face. She founded the Reach Higher program to encourage young people to look at opportunities for higher education and professional development after assisting Obama in winning a second term in government.
  </p>
 </main>
 <!-- Attribution -->
 <footer class="attribution">
  Challenge by <a href="https://www.freecodecamp.org/learn" target="_blank">freecodecamp</a>.
  Coded by <a href="https://github.com/Timiphil">Timiphil</a>.
 </footer>
 </div>
</body>

</html>
1 Like
10

Hi @Timiphil

I am still learning, be aware of that. Your layout is not tricky you could do something like this as starting point:

NOTE this

  • I am not using your fonts, this is a mockup (also I recommend you to import fonts from your CSS using the other option Google Fonts give you: @import).

  • I make your h1 look bigger, don’t be afraid to experiment with empty spaces and different font sizes. Note that I have used a font-weight: 800; but you should use one from Google Fonts (what it looks better for you). Tip: you can import all the styles from Google for that particular font , do your test, and finally just import the font-weights you have used at the final layout.

  • Instead of use white for text I have write green in Visual Studio Code and then click on the color’s popup window and check for a whiter green. Use the same units (#fff or rgb, for example) for all the colors, remember this is just a test.

  • Following your original layout and put the color background into the body, wich will take all viewport width. Note that I have put into the body the font- properties and the text color (color) to the whole page, all elements will inherit this styles, so less code. You can change any element styles after. I have used padding to make it look better.

  • I have use the div container (.whole) to give a maximum width to all content in your page; this is what I meant before. You can use something like this to build cards, for example.
    ]

Use my code as you want, open it on the browser and use browser Dev Tools to check and uncheck CSS properties to see what I have done there. I hope all this make sense for you.

REMEMBER: webpages are responsive by default. It works fine without CSS, so try dont fight against it. Start simple. I have started styling for a mobile first.

*, * > * {
  box-sizing: border-box;
  /* outline: 2px solid pink; */
}

body {
  margin: 0;
  padding: 1rem;
  max-width: 100vw;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.2rem;
  background: url(./images/bg-pattern-top.svg), hsl(185, 75%, 39%);
  background-repeat: no-repeat;
  color: #ebfbe9;
}

.whole {
  max-width: 600px;
  margin: 0 auto;
}

main {
  margin-bottom: 1rem;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.8em;
  font-weight: 800;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
  border-radius: 50%;
  margin-bottom: 1em;
}

figcaption {
  font-size: 1.6em;
  text-align: center;
}

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

p > a {
  color: inherit;
}

p::first-letter {
 // styles for the first-letter of any paragraph
  font-size: 2.2em;
  font-weight: bold;
  color: aquamarine; // be consistent with color units, don't use keywords for colors; I did it to go faster
  padding: 0.5em 0.1em 0 0;
  vertical-align: 10%; // it makes the first letter "float" a bit from the paragrah baseline 
}

footer {
  padding: 1em;
  text-align: end;
  font-style: italic;
}

Sorry if I have confused you before, do your test. It is not a race, so take your time building your projects. I am a bit sleepy today. :sweat_smile:
Happy coding and weekend!!

3 Likes
11

Thanks for everything. i will try to experiment with it. :pray:

2 Likes
12

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.