Creating a Tribul Page

HTML-CSS
#1

Hi people,
I feel totaly lost on it… To create a tribul page… I got little bit problem to understand what is exactly id or div element.
If we have the commissioned UserStory I do only what they want to see or I need a create a new page…?
For now I have this code, its till user story #6:

<main>
<title="Dr.Norman Borlaug">
</title>
<div>
.img-div
.img-caption
</div>
.image
<id="tribute-info"/id>

If its will be someone who can help me with this or show me where to find a better explained of it…

Thanks

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

Challenge: Build a Tribute Page

Link to the challenge:

1 Like
#2

Hi @CoraLean !

There are a couple of syntax errors that need fixing.

The first thing that I notice is there is no end main tag.
This is an end tag </main>
So the end tag needs to go at the bottom of your current code.

The second thing I notice is the use of title tags. Title tags are used in the <head> and define the title for the document.
w3schools does a good job of showing you how to properly write title tags
https://www.w3schools.com/tags/tag_title.asp

The next thing is the div tag. Div tags do not have any meaning and act as divisions in a web page. They usually serve as a generic container to place other html elements into.

Here is an example of a div container of img tags.

<div class="img-container">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</div>

Lastly, id’s act as unique identifiers for html elements. Id names need to be unique and should only be used once per page.

This is the proper way to write an id.

<h1 id="tribute-info">Tribute info</h1>

I would suggest slowly going through each of the user stories and then worry about styling the page.

Hope that helps!

2 Likes
#3

Let’s clear this up. div would be part of an element, id is an attribute. Here’s a little explanation;

HTML tags vs elements vs attributes

HTML tags

Tags are used to mark up the start and end of an HTML element. The following are paragraph tags.
<p></p>

HTML elements

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>This is the content of the paragraph element.</p>

HTML attributes

An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">

You don’t have to replicate the sample project. Think of maybe a person or a band or even a potato ( :slightly_smiling_face:) you admire and that subject can be your tribute page.
You’ll need to fulfill each of the user stories. Do one at a time and then go ahead and style your page.

2 Likes
#4

Thank you, so helpful… Now I will little bit more learn abour CSS in our language, its helped me a lot too… Hopefully i will soon understand better… :))

2 Likes
#5

Thank to you too :))

1 Like
#6

Now I do it like this, but its still unsufficient… You mean its really so bad or its some mistake on the exuded?

Thanks to you!
2021-03-09|690x388

#7

A couple of things.

It will be easier for me to assist you on the forum if you share a link to your codepen project.
Copy and paste your codepen link here into your reply.

A few things I noticed in the screenshot

  • I would delete everything from your css section because you wrote the html tags which is incorrect. The proper syntax looks like this.
img {
max-width:100%;
}

You can keep the img selector in your css but you will need to delete everything else.

  • you can’t have more than one id in the same html tag. This is wrong
<h1 id="title1" id="title2">Title</h1>
  • You have a couple of places where the a and h1 tags have syntax errors. I would keep referring to documentation like MDN docs to make sure you are writing these tags properly

Also, you have not forked the project properly because the url still says https://codepen.io/freeCodeCamp/pen/MJjpwO

You need to be logged into you codepen account and then click the fork option which is located at the bottom right hand corner of the screen

Screen Shot 2021-03-09 at 2.47.19 PM
Screen Shot 2021-03-09 at 2.47.19 PM1512×696 38.9 KB

When you do that then you will notice that the url will have your username not freecodecamp’s.
And then you can save the project and keep coding.

Hope that helps!

1 Like
#8

Hi,
Thank you for your help. I have last one question… Now I do it like this, should be everything alright just one problem with the main and the resizing image, I don’t know from where I should take the size or what i do wrong there. I’m sorry to not share on CodePen Pro I don’t have it paid yet… about the fork option, I finded one time when I started with the project and from this time I cannot find it again…

image.png
image.png1920×1080 336 KB

Thank you for your time love…
Karolina

st 10. 3. 2021 v 0:13 odesílatel Jessica Wilkins via The freeCodeCamp Forum <freecodecamp@discoursemail.com> napsal:

1 Like
#9

Hello @CoraLean
Answering your question:

If we have the commissioned UserStory I do only what they want to see or I need a create a new page…?

In order to pass the challenges you just have to complete all the user-stories steps. But I do recommend you go a bit further; as they are simple to accomplish ,the final results is not the kind of thing that can sell yourself in a portfolio.

Also, thought not mandatory, it would be interesting if you can save then as your own codepen.io work, and not in the forked FCC from freecodecamp, cause as you start to save them, the followings will start to override the previews one.
That is bad cause, after when you click on your profile and to view the solution in your timeline, you’ll be leading to the same forked with the last saved project no matter what ***view *** you click on.

1 Like
#10

@CoraLean

If you want to make the image of your tribute page responsibly, you can go by following as I did:

#image {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: auto;
}

The max-width of 100% will make sure the image is never wider than the container it is in, and the height of auto will make the image keep its original aspect ratio. As well taught in responsible web design principles Class, lesson 3.

Thank you !

1 Like
#11

You don’t need to pay for the pro version.
You can share your link by copying the link from the top of the page.

Screen Shot 2021-03-10 at 12.10.13 PM
Screen Shot 2021-03-10 at 12.10.13 PM1114×194 19 KB

As for the fork situation, an alternative would be to create a new Pen and add this to the html page
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

Just like you see this in screenshot below

Screen Shot 2021-03-10 at 12.27.55 PM
Screen Shot 2021-03-10 at 12.27.55 PM1402×1168 72.2 KB

For the image, you already received part of the answer but it needs to be properly centered.
asign:center is not how you center an image.
Read the full error message which will tell you how to fix that.
You can also google how to center image css to get the answer.
Research is an important part of being a developer.

You have made a lot of progress in last couple of days.
Keep up the good work!

1 Like
#12

Thank you all,
Now I got it like this…

A Pen by coral (codepen.io)

About the main element… I try to do it like this: h1 id=“main” or just main… and its still dont usefull…

And the resizing of image seem be the same… Maybe it’s enough if you told me if it’s the mistake on my side or if its some error…
Thank you

1 Like
#13

Your id=“main” needs to be in the <main> tag.

This is the full error message for the other failing test.
The element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’

The answer is in the error message. Always read the full error message.

Some other things that I noticed.

  • Your script tag should not be inside the main tags. Just move it to the very top of the page.

  • img tags are self closing.
    This is incorrect

 <img id="image"></img>

Please review the proper format for image tags.