https://codepen.io/jackieb/pen/qvgaRX

Code Feedback
1

https://codepen.io/jackieb/pen/qvgaRX

Please review my Tribute Page project. I have passed all tests but I do not like the img-caption. I also dislike the the tribute-info. Is the h2 text and the

all in one. The reason I am asking is I cannot change the color of the text in h2.

1 Like
2

@philly5 Nice page!
Two suggestions to improve the page:

  1. Do not let the image shrink to less than 300px width so that it will easy to see in mobile view.
    I do that like this:
img {
    width: 100%;
    height: auto;
    max-width: 300px;
}

On larger screens, I might set img tag to this:

max-width: 400px;
  1. Set text-align: justify on your p tags to line up the text better.
2 Likes
3

Thanks Brandon. Everything looks better Jackie

1 Like
4

Hi @philly5, just a couple of things;

  • codepen provides you with validators for HTML, CSS and JS. Click on the arrow in the upper right of each section and then click on the respective ‘Analyze’ link. There are a few things you should clean up.
  • I see you’re calling the Montserrat font in CSS but I don’t see anywhere where you’ve linked to it or imported it.
  • When you copy/paste text from somewhere like Wikipedia it sometimes includes references to footnotes. (Those are the numbers in the brackets.) If you’re not going to include the footnotes, you should remove them from your paragraphs for easier reading.
2 Likes
5

Thanks for your feedback. Here is my revision after I took your advice.

https://codepen.io/jackieb/pen/qvgaRX

Jackie

1 Like
6

I like that you are giving tribute to the amazing sandwich!
I would suggest you add some margin and padding to the text so that it is centered a bit better. add some spacing on the sides.
you actually can change the color of the h2.

7

Hi @philly5, a few things;

  • When linking to a font that is something that would go in the <head> Since codepen only want you to put in code that goes between the body tags you need to put your link to your font in the head by clicking on the Settings button. You’ll see an area titled ‘Stuff for <head>’ Put the link to your font there.
  • I see HTML has validation errors. You can clean these up. For instance you have <img id="image" src="yada, yada"</image> The img element is not closed. It should be <img id="image" src="yada, yada">
    (The img element is self closing so </image> is not valid.
  • align is not valid on the <p> element so you should remove that. Styling can be done in CSS
  • The reason your image-caption is not styled is because you have it set with an id (id="img-caption") but in your CSS declaration you’ve called it image-caption. And that is not the correct way to reference an id.
  • You have a link away to read more but it doesn’t show because there’s no text for the reader to click.
8

Thanks Conner for your feedback. I added padding and margin, plus I also added a border.

https://codepen.io/jackieb/pen/qvgaRX

Jackie

1 Like
9

Good morning Roma,

If you look at the bottom of my page you will see a link. I have it in HTML but it is not underscored. I need to work on it some more as I want to make it BOLD and the font larger.
Question: Would I use CSS or HTML for that?

https://codepen.io/jackieb/pen/qvgaRX

Thank you,
Jackie

10

Good morning @philly5,

The reason your link isn’t underscored is because right now it’s;
<a href:"https://firstwe...

it should be <a href="https://firstwe...

To answer your question, do the styling in CSS.

11

Nice, man! much better!