Hi all!
I have 4 errors that I can’t quite overcome to get my certificate, they are as follows:
Your portfolio should contain at least one element with a class of project-tile .
Your #navbar element should always be at the top of the viewport.
Probably something really silly but again I am very new to this, thank you in advance
https://codepen.io/clarasais/pen/JjZPPdb
Ps. I have tried sharing the code in Codepen from FCC but doesn’t look right
Guided
April 28, 2023, 12:07pm
2
Its difficult to help without seeing the code.
you can show a code block by surrounding it
if you cant find the backtic on your keyboard use ALT+065
could you copy and past your html code ?
Guided
April 28, 2023, 12:08pm
3
is this for the ‘build a personal portfolio webpage’ cert?
Guided
April 28, 2023, 12:17pm
4
<section id="#profile-link" class="project-tile" <a target="_blank" href="https://github.com/clarasais">GitHub</a>
I think the id=profile link should be on an anchor element, but not 100% sure
sometimes margins can prevent nav bars passing. try a margin-top: 0px
1 Like
Yes, the final project for the responsive web design cert
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section>
<nav id="navbar">
<a class="nav-link"href="#home">Home</a>
<a class="nav-link"href="#graphicdesign">Graphic Design</a>
<a class="nav-link"href="#illustration">Illustration</a>
<a class="nav-link"href="#books">Books</a>
<a class="nav-link"href="#cv">CV</a>
<a class="nav-link"href="#hcontact">Contact</a>
</nav>
</section>
<section id="welcome-section">
<h1>Claire Sells</h1> <h3>Illustrator/Designer/Coder/Vocalist</h3>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
</p>
<section id="projects">
<a href="https://www.youtube.com/ClaraMarieSais">My YouTube Channel
</section>
<br>
<section id="#profile-link" class="project-tile" <a target="_blank" href="https://github.com/clarasais">GitHub</a>
</section>
</body>
</html>
Your two issues here
are because of this
<section id="#profile-link" class="project-tile" <a target="_blank" href="https://github.com/clarasais">GitHub</a>
</section>
Need to get rid of the # in the id
The challenge says you need an a element (or link) that has the id of profile-link. You have your profile-link id in a section.
You also need to add a closing > for your opening section because you are missing that
Once you move the id to the link with the target attribute then it should fix the other issue
1 Like
Thank you to both of you. I have managed to correct the ’ * Your #profile-link element should have a target attribute of _blank.’ error, just the last three I am stuck on?
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section>
<nav id="navbar">
<a class="nav-link"href="#home">Home</a>
<a class="nav-link"href="#graphicdesign">Graphic Design</a>
<a class="nav-link"href="#illustration">Illustration</a>
<a class="nav-link"href="#books">Books</a>
<a class="nav-link"href="#cv">CV</a>
<a class="nav-link"href="#hcontact">Contact</a>
</nav>
</section>
<section id="welcome-section">
<h1>Claire Sells</h1> <h3>Illustrator/Designer/Coder/Vocalist</h3>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
</p>
<section id="projects">
<a href="https://www.youtube.com/ClaraMarieSais">My YouTube Channel
</section>
<br>
<div section>
<a
id="profile-link"
href="https://github.com/clarasais"
target="_blank"
class="btn contact-details"
><i class="fab fa-github"></i> GitHub</a
>
</div>
</body>
</html>
And here is the CSS
body {
background-color: #fce9eb;
color: darkred;
text-align: left;
font-family: 'Open Sans', sans-serif;
}
@media only screen and (max-width: 200px)
The last three are pretty straight forward
Your portfolio should contain at least one element with a class of project-tile . - I dont see any element where you have given them the class of .project-tile
Your portfolio should use at least one media query. - your media query is not structured correctly. You can look here and get a better idea of how it needs to beCSS3 Media Queries - Examples
Your #navbar element should always be at the top of the viewport. - you can read here on how you can do thatHow to Keep a Navbar at the Top of My Viewport?
system
October 30, 2023, 9:43am
11
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
