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
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
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?
