My Tribute Page Challenge - Feedback

My Tribute Page Challenge - Feedback
0

#1

Trust me I know this is very basic but just wanted to get some ratings on my tribute page. If you see any errors in my code or ways to simplify it please let me know. Any feedback is appreciated. Thanks!


#2

Hi,

I’m on my phone, so I cannot judge it so deeply, but it seems unresponsive. Have a look at the screenshot:

Have you tested your app? It only shows 1 test completed to me.

Keep it up! :slight_smile:


#3

Are you talking about the “burger” icon in the top left corner? That is just part of the free code camp script for running the test to make sure you’ve completed everything.


#4

Yeah, right. But if you choose the tribute page from its drop down menu and run the script, it should give you a green output, which means all tests have been satisfied. I did it and only 1 test passed.


#5

That’s strange. Whenever I first completed this it said all had passed. Not sure why it is doing that now.


#7

Kind of. Sometimes the output is gibberish, but you can click the red button that says x/10 and click on each individual element of the list.


#8

I’ll see what I can do to resolve the issue. Thanks for the feedback and letting me know.


#9

I can not get the responsive image to pass. I have tried numerous ways to get it to work but can’t seem to get it to pass.


#10

This will help you get started.


#11

That is what I am doing now. Still can’t get it to pass. Not sure if it is a bug or if I am doing something wrong.


#12

I’ve had quick look into your code and I’ve saw that your header class has a fixed width of 500px. That’s not responsive.

In your markup there are quite a few bugs to be fixed. For example, you’re not closing the a tag after the first paragraphs.

You have imported bootstrap in your code, why don’t you take advantage of it? To make your page responsive using the classes bootstrap provides would be easier. I know you’re using col-md-* classes, but there is also col-sm-* and others to help you on this.

I would really recommend you to take some training on bootstrap (YouTube has lots of videos on this) and get back to this after you practiced a bit. I know it might look like a waste of time, but you will be thankful that you did it. Otherwise you will end up with spaghetti code that you don’t fully understand.


#13

Unless I am overlooking something you’re seeing all my a tags are closed. They’re closed after, “Click here”.

I have deleted the the header and I still get 9/10.


#14

Also, while I am thinking about it I have tried I have played around with and used different ways using bootstrap to resolve the image issue. I have had 0 luck into solving that issue.

I have gone and looked at other peoples tribute pages to try and see what I maybe doing wrong. A lot of them I look at only pass 1/10 test.


#15

Oh, my bad. Sorry about that, I didn’t see the closing tag.

If anyone pretends to get their certificates and some user stories are not fulfilled, someone might notice and their certificates should, and probably will, be revoked because their not following the guidelines.

If I have time later I’ll have another look at your code if nobody helped you before.


#16

Yeah it bothers me if its not 100% passed. I am glad you pointed out that all weren’t passing. I do appreciate you taking the time to reply and help giving tips and advice.


#17

Hi again,

I’ve just reviewed your code and only one thing breaks the tests. Add this to your CSS:

img {
  max-width: 100%;
}

This will fix it. But you should tweak your code so it is fully responsive. Open the page on your phone and you’ll see it breaks the layout even if it passes all the test cases.

Anyway, now it’s all green, so congrats!


#18

Thanks so much for the advice. I’ll definitely work on making the mobile size as well.


#19

Bringing back an oldy but goody.

  • with you text, I think that you need to increase the line-height for readability.

  • I would add a few more pics on the right of the History section so it doesn’t look so blank.

  • as far as the colors go, I wouldn’t use gray. All the colors of a website should be based off something. The logo is the most important feature, so you should use variations of the colors in the logo instead.

  • the headings need to have their own color too.

  • with the “Click here to learn more about this history of the Teenage Mutant Ninja Turtles.”, you need to change the link color so that you can tell that “Click here” is actually a link. Maybe color it the same as the headings.

  • oh, and you totally forgot to add Splinter lol.

Hope this helps!


#20

Try adding box-shadow: 2px 2px 5px black; to your container


#21

Really fun tribute page idea. Just remember for external links that we want these to stick out in some way. Currently I don’t know what text is a link until I hover over it. Additionally, for accessibility reasons I wouldn’t use “Click Here” as my link text. Instead I would have it be something like “For more information see Leonardo’s Wikipedia article” and have “Leonardo’s Wikipedia article” be the link. This helps those who need to use screen readers.

Great job!