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:
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.
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 ( ) 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.
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… :))
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
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…
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.
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.
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>
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!
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.
) you admire and that subject can be your tribute page.
