Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
some tests fail but the requirement is satisfied

Your code so far
Your portfolio should contain at least one element with a class of project-tile.

        <div class="banner text-rainbow">
           <img src="mda.png" alt="eat me!" class="mda">
           <span class="project-title">M.D.A. Portfolio</span>
        <nav id="navbar" class="navbar">
                <li><a href="#welcome-section">Whoami</a></li>
                <li><a href="#projects">Works</a></li>
                <li><a href="#contact">Contact</a></li>
Your `#navbar` element should always be at the top of the viewport.
SAME CODE ABOVE,  no media query involved for this

Thanks in advance

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

@polakenfold welcome to the freeCodeCamp forum community!

Your portfolio should contain at least one element with a class of project-tile .

I don’t see an element with class of project-tile in your code.
There is a class “project-title” but “title” and “tile” are not the same words.

I think the “project-tile” class could be written as an attribute in the
opening tag of a div as a project thumbnail container.

<!-- This is an HTML comment ( Writing comments can help to keep track of your
 thoughts as you code and there are other reasons to write comments too ).

The "project-tile" class will allow you to apply styles to all your project thumbnail 
containers with just one selector in your CSS so that you don't have to write CSS for 
each individual project thumbnail container. 
Your project thumbnail container divs can be nested inside a projects section with an id of "projects". 
See the hint HTML and hint CSS I wrote below that helps illustrate what I've said above.
width: 200px;
height: 200px;
font-size: 1.5rem;
color: white;
background-color: rgb(100,100,100);
/* This is a CSS comment. 
Some CSS flex and/or grid properties might be useful here */ 
<!-- HTML code below -->
<section id="projects">
<div class="project-tile"> <!-- opening project thumbnail container div tag -->
<h3>My Tribute Page</h3>
<img class="tribute-page project-thumbnail-img" src="You can upload a screenshot of
 your project to a secure website, then right click it ( so from the menu that pops up after
 you right-click, you can click 'copy image address' or something like that ( it may be 
different on different browsers ), then just paste that link to your project screenshot
 here inside the opening/closing double quotes of this src attribute." alt="thumbnail of 
my tribute page freeCodeCamp project"/>
<p> description of your project here </p>
</div> <!-- closing project thumbnail container div tag -->
<!-- The rest of the project thumbnail containers may be written in a similar way as the one above. -->

I’d like to know if this reply of mine helps you and if I can be of further help.

note: a thumbnail is an image of web content used as a link to the actual web content that is shown in the thumbnail image ( an example is the images that are clicked on on youtube to bring the user to the video of the image that was clicked ).

that was it!
i confused one word with another… thanks!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.