Build-a-tribute-page What is my #id

1

Hi guys and gals,

Tell me, in this project, Did they want us make id like (in the project description)

#main
#title
#img-div etc’

or

| etc' ?

And What they mean by corresponding with ID ?

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0.

Link to the challenge:

1 Like
2

You can name the ids for the different sections whatever you want. But it makes sense to call the contacts section something like “contacts” instead of “banana-speedboat-tiger”. But you can use any unique and valid HTML name.

2 Likes
3

I’m sorry, I hadn’t seen the beta one. Perhaps it would be best to stick with what they have. I don’t know if they have some autochecking. But in theory, the names could be anything.

4

So I can use main-image etc’, right ?
And it must be an id like #main-image?
Because I don’t know how to this for title and main etc’
And they talked about corresponding and stuff, Here a part of the project:

User Story #1: My tribute page should have an element with a corresponding id=“main”, which contains all other elements.

User Story #2: I should see an element with a corresponding id=“title”, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”).

User Story #3: I should see a div element with a corresponding id=“img-div”.

User Story #4: Within the img-div element, I should see an img element with a corresponding id=“image”.

5

Again, in theory the id name can be anything. But since you are given very specific instructions, I would stick to those. That is how the work world is.

The first user story:

User Story #1: My tribute page should have an element with a corresponding id=“main”, which contains all other elements.

So, there should be something like:

<div id="main">

  //...

</div>

And according to the instructions, all the other elements (div, span, p, h1, h2, etc.) should be inside this.

Just work through the user stories one by one. You can add to it as needed, but you should meet the user stories.

Let us know if you get stuck.

4 Likes
6

Thank you very much!

One thing that I can’t figure out is how to put my headline and h2 next to an image inside an image,

pen: https://codepen.io/nadav-himmelfarb/pen/BxwEPz

Right to the logo there should be my headline like, red hot…
I tried couple of things and nothing, what is the seample way to achieve this ?
I don’t think grid will work it out, Am I right?

7

There are a couple of ways to handle this. One would be to give that h1 some absolute positioning:

.title {
  display: block;
  position: absolute;
  top: 80px;
  left: 490px;
}

and apply that class to the h1

Another approach would be to make that larger image a background image in the div so you can put those elements inside that div and get things to line up a little easier. I’m sure there are other options.

3 Likes