Tell us what’s happening:
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; itel A16 Plus) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Mobile Safari/537.36.
Challenge: Build a Tribute Page
Link to the challenge:
For images you will have to format your code like this:
<img src="https://images-gmi-pmc.edge-generalmills.com
/087d17eb-500e-4b26-abd1-4f9ffa96a2c6.jpg" alt="Picture of cookies">
In your src attribute, that is where you will place the url address.
Hope this helps.
Happy coding!
Thank that really help. However I will like if am thought how to place the URL for any of the pictures I will like to add. Eg I will like to add my personal pic , animal pic etc. Then in the URL do I need to type the name of the animal direct or my picture name or what . Eg <img src=“https://my-personal-picture.jpg alt=”">
<img src=“https://chick-picture.jpg"alt=”" this is what am trying to ask. Then should I apply this method to every picture that I want to add???
Hi @ychris , If You Wanna Upload A Personal Picture Then You First Have To Upload It On The Internet As For How Or Where I Don’t Know… But I Do Know This That You Have To Upload The Picture On The Internet.
Assume the picture is already on the net then how exactly I my going to add it to my web note that I understand but what is the pattern for the addition or here are many pictures on the net then what is the pattern or method to add for any picture that I will want to add from my URL. Thanks for replying back
Well It’s Easy Then If The Picture Is Already On The Internet Just Do It Like This:
img src=“URL-of-the-Image” alt=“Information Of The Image You Added”
And It’s Done !!!
You Can Get A Specific Image By Putting It’s URL.
You Can Get The Image URL By Opening The Image In A New Tab.
Thanks for that. Let’s see about this
is the URL good enough to add the picture of penguin??
So, I think I understand what the problem is. It looks like you are trying to create your own url by manually adding https to the name of the image you want to use.
If that is the case, then that method will not work. I tried the link for your picture of a penguin and it brought me to a website that specializes in family portraits.
If you want to use personal pictures that are only stored on your local device (mac, windows) you have to get them hosted online so the world can see that image.
There are a lot of sites that will charge for web hosting but I think the best option for images would be to use Github. You will need to create an account (free) and follow these instructions.
I hope that helps.
Thank you so much . My errors could it be the reason I can’t pass the test suit of my project , and I wanted to upload it for assistance using code pen don’t know how. This is the screenshot what could be the problem.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<main id="main">
<h1 id="tittle">Mr. Joe Enes the chief chef</h1>
<p> <em>The first man with a biggest restaurant in South Africa</em></p>
<figure id="img-div">
<img id="image" src="https://images-gmi-pmc.edge-generalmills.com/087d17eb-500-4b26-abd1-4f9ffaa6a2cb.jpg" alt="picture of cookies"./>
<figcaption id="img-caption">A wonderful chef Mr.Joe Enes</figcaption>
</figure>
<section id="tribute-info"><h2><strong>The chef etymology </strong>
<p> Mr. Joe Enes have the bigest restaurant in Sourth Africa he started as a servant <strong>in 1992</strong> in a royal palace where he become great chef today</p> <h3><u>Below are the link to Mr.Joe Enes the chef for more information</u></p3>
<ul>
<li><button type="link-ethics">Joe ethics</button></li>
<li><button type="link-history">Joe history</button></li>
<li><button type="link-etymology">Joe etymology</button></li> </ul>
<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/joe">follow the link for more information</a>
</section>
</main>
<footer id="footer">(c) 2008:Joe Enes</footer>
Yes that was the problem.
For the cookie picture, there were several typos in the url and that is the reason why it is not showing up. When you are copying image urls make sure to copy it exactly without any typos or else it won’t work.
As for codepen, you will need to create a new account and create a pen. From there, you can post your HTML into the HTML editor and the CSS inside the CSS editor.
I have applied your method and it work I was able to add and preview the image but one thing is left which is test suit failed and I think I have done the needful if you can fish out the problem.
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<main id="main">
<h1 id="tittle"><em>the strongest and visional bird Eagle</em></h1>
<figure id="img-div">
<img id="image" src="https://images.unsplash.com/photo-1531884070720-875c7622d4c6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="eagle flying in the air">
<figcaption id="image-caption"><strong>The most strongest birld in the world</strong></figcaption>
</figure>
<section id="tribute-section"><h2><u>The etymology of eagle</u></h2>
<p>eagle is a prey that belong to the hawk family noted for the size, renght and ppwer of flight and vision.</p>
<h3><strong> CHARACTERISTICS OF EAGLE/SYNONYMS</strong></h3>
<ol>
<li>Eagle have very large hook for ripping.</li>
<li>Eagle also have a strong muscle legs and talons </>
<li>finally eagle have a heavier peak</li></ol>
<p>you can also browse more about Eagle ethics from the following link</p>
<ul>
<li><button type="link-ethics">link-ethics</li></button>
<li><button type="link-etymology"</li></button>
<li><button type="link-full">eagle full story</li></button>
<a target="_blank" href="https://en.wikipedia.org/eagle"</a>
</section>
</main>
try using an html validator (codepen has one), you have some syntax errors
also please format your code
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
Where exactly exactly is the error so that I can make the correction
Codepen has a feature called analyze HTML. When you click analyze HTML it will show all of the errors in red. They give pretty good descriptions on what to fix.
Also you only passed 4 out of 10 tests. Look at the test suite and look through the issues. FCC does a good job of pointing out the errors so you can fix them.
For future project posts, I think it might be better for us to help you if you copy your codepen project url instead of copying dozens of lines of code inside the forum. I think it is fine to share a few lines of code inside the forum using the formatting that @ilenia was talking about. But when it comes to projects, I think it would better to just share your codepen link. That way we can just go straight to codepen and look at your project from there.
Thank you very much it is easier with people like you around and the FCC have great assistance
I really don’t want to leave this part out of my project. I want to wrap the bullet to the link respectively so what is the correct way of doing it for e.g
<ul>
<li><button type="link-view">follow the link</li></button>
</ul>
to me this will create a bullet follow by a link. But the error message is that button open tag not match help please
I think you are referring to this:
That won’t work.
You could try this instead. Of course you will have to modify the CSS stylings to fit your project needs but this is just one example. You could also review the CSS section in the curriculum on borders and background images so you can create your own custom buttons.
HTML
<ul>
<li><a href="https://google.com" class="button">Go to Google</a></li>
</ul>
CSS
a.button {
text-decoration: none;
color: white;
background-color: #ffa500;
border-radius: 50%;
padding: 15px;
}
if you don’t format your code people don’t see what you have posted
without formatting:
with formatting:
where can you see code you posted and understand what’s there?
I have open and close anchor tag as suppose and my survey project it’s still analyzing it what could be the problem. The link has been posted already.
It would help to see your code so we know what the problem is