Tribute page help :)

HTML-CSS
#1

I am really struggling with the tribute page, does anyone have a link to someone who has completed it so i can have a look?

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

#2

Many people I see here make a very similar page to this https://codepen.io/freeCodeCamp/full/zNqgVx so maybe it would help if you take a look at it :slight_smile:

1 Like
#3

Here’s a similar tribute page that the challenge gave you:
https://codepen.io/freeCodeCamp/full/zNqgVx

You could make one similar to it. or make up your own while doing your tests.

#4

@oliverkite, what part are you struggling with? You should ask that specific question here.

Looking at another solution isn’t going to be much of a help. It is hard to come up with a plan on how to do the projects…that’s the point. Looking at another solution bypasses that step.

There are the user stories that you need to follow to complete the project. Start by doing one user story at a time. Don’t worry about styling at this point. Complete the first user story, then the next and so on and you’ll have a page. It won’t be pretty for sure but that’s when you’ll think about how you’d like to style it. Maybe put pen to paper and make a rough sketch on how you’d like to lay out the page and then go ahead and start styling it to match your sketch.
That’s it!

Start small and work your way up. So, where are you struggling?

2 Likes
#5

Thanks for the reply. Im actually struggling with remembering the coding structures. I do the lessons but dont seem to retain much of the information and trying to build this small site i dont know where to start so am having to look at other peoples examples, kindve feels like cheating though

#6

Hi @oliverkite !

That is completely normal. It is hard to remember everything. That is why you build projects to help you practice the concepts.

My advice would be to look at the finished product (not the code) and deconstruct it.

Here are the main components:

  1. title of the subject

  2. image

  3. image caption

  4. details of the subject

  5. a link for more information.

Tackle each of those main components one at a time.
Start with html and go through each user story.
Then worry about styling.

You should not copy the sample.
You will learn a lot more by building your own project.

The goal of these projects IMO, is to learn how to research and ask questions.

For this project, some question that you can research will include:
What kind of element should I use for id="main"?
What kind of element should I use for id="title"?
What do they mean by the img element should responsively resize, relative to the width of its parent element, without exceeding its original size?
How to center an image?

Don’t worry about perfection or not making mistakes.

You are going to make mistakes and that is a good thing.
Learning from mistakes will help you.

Hope that helps!

#8

thanks for the reply Jess. This is as far as i have got, says im passing 6 tests.

https://codepen.io/Oliver4747/pen/yLgxBwj

Struggling with: User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centered within its parent element.

#9

@oliverkite, when a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The two stories you’ve mentioned will need CSS styling to pass which you haven’t started yet.
The first failing test says;

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'

Notice how the full message gives help.

There are two additional failing test where if you read the entire message you’ll see they are failing because of spelling issues.

#10

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