Tribute page - questions and feedback

Code Feedback
1

Hi guys, I just completed my first css/html project of my life and it is the tribute page.
It doesn’t look good right now, but it follows the user story.
I wanted to know something, the initial image I am using is really big, but I didn’t find a way to make it smaller and then do the adaptative resizing easily. It seems that I used too much code for something that should be easy.

2 Likes
2

Hello, you can use max-width as you do in your code. In this case you don’t need to set max-height since the height of the photo will be reduced in proportion to the width.

Otherwise your first project is good.

3

Thank you, actually that’s what I have done firstly just setting max-width, but it wasn’t working that’s why I used both max-width and max-height

4

Welcome to the forums @regunhd. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • codepen is forgiving. the link to the test script is JavaScript and in a normal page would be right before the closing body tag. In codepen you can put it as the first thing in the HTML section.
  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Not sure if you noticed but even though you use the strong tag around the dates they don’t display as such.
    • This is because when you linked your font you only selected the normal weight (400). The browser doesn’t know how to apply anything heavier. If you also want to use a bolder font then you need to link both the normal (400) and the bold (700). Just select both.
    • It will also make your footer bold. The way you intend.
5

Thank you for your detailed feedback, I correcte all these errors.

6

Good job cleaning things up @regunhd.

  • There’s a stray <br> still in your code
  • To see the bold / strong font the way you intend try the following in Settings
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
7

I did these revisions, now I hope I am good.

8

Looks good @regunhd. Now it displays like you wanted it to.

9

I will be back at it when I’ll be more experience with HTML and CSS, because it doesn’t look fancy for now lol.

1 Like
10

:slightly_smiling_face: It doesn’t have to look fancy. You can keep this as your project submission and when you have more experience create another page. Maybe fancier and with some variations that don’t fullfill all the FCC user stories but one that’s fancier and fun nonetheless.

Look forward to seeing your next projects.

11