Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:

Your portfolio should contain at least one element with a class of project-tile.
Ive tried many things and nothing seems to work, still working on my code but its driving me crazy i cant get that one.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
  <meta charset='utf-8'>
 <meta name='viewport' content='width=device-width, intital-scale=1.0'>
  <link href='styles.css' rel='stylesheet'>
  <title>Portfolio</title>
  </head>
  <section id='welcome-section'>
<h1><em>Portfolio</em></h1>

<nav id="navbar" class="nav top-bar fixed">
  <ul class="nav-list">
      <li><a href="#welcome-section">About</a></li>
      <li><a href="#projects">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    
  </ul>
</nav>
 
<h2>Visit<a href='https://codepen.io/your-work'> here</a> for all my work</h2>

<h3>My name is Stephanie, i've just began my journey to become a Software Engineer and have started with the essential programming skills of Web Development.</h3>

<body>
  <div class='row'>
<div class='column'>
<p id='projects' class='project-tile'>
<img src='https://i.postimg.cc/P5ynJvm6/Screenshot-15-5-2024-141853-codepen-io.jpg' id='image1' height='400px'
width='600px'></img></p></div>

<div class='row'>
<div class='column'>
<p>
  <img id='image2'src='https://i.postimg.cc/g0vf6XFX/Screenshot-15-5-2024-143528-codepen-io.jpg' height='400px'width='600px'></img></p>

  </div>


<div class='row'>
<div class='column'>
<p>
<img id='image3' src='https://i.postimg.cc/cCZCGTrL/Screenshot-15-5-2024-151141-codepen-io.jpg' height='400px'
width='600px'></img></p>
</div>

<div class='row'>
<div class='column'>
<p class='project-tile'>
<img id='image4' src='https://i.postimg.cc/mr2SBN1V/Screenshot-15-5-2024-153020-codepen-io.jpg' height='400px'
width='400px'></img></p>
</div>
<p id='projects'>All i've learned and have been able to create so far has been thanks to <a href='https://forum.freecodecamp.org/u/stephenelee/summary'>freeCodeCamp.</a></p>

  <h4 id="contact">
          Contact at <a id='profile-link' 
target="_blank"          href="https://codepen.io/your-work">CodePen</a> or <a id='profile-link' target='_blank' href='https://forum.freecodecamp.org/u/stephenelee/summary'</a>freeCodeCamp</h4>
            </body>





































  </html>


/* file: styles.css */

* {
  box-sizing: border-box;
}
header
{position:fixed;}

body
{background-color:#0e2c40;
margin:0;}

section {
font-family:Arial;
color:#c1e1a7;
}

nav
{text-align:center;
position:fixed;
top:0;

}

h1
{text-align:center;
font-family:Constantia;
font-size:80px;
padding-top:20px;}

h2
{color:#c1e1a7;
text-align:center;
font-family:Constantia;}

h3
{text-align:center;
font-size:15px;
padding:0px;
font-family:Constantia;}

h4
{text-align:center;
font-size:13px;}

img
{width: 100%;
  max-width: 600px;
  height: 400px;
  object-fit: cover;
  border-radius: 50px;

  
}

  p
  {font-family:Constantia;
  text-align:center;font-weight:bold;
  color:#c1e1a7;
  
  }
  
  a
{text-decoration:none;
  color:#efcb75;}
  a:hover
  {color:#008080;}
  a:visited
  {color:}


  .column {
  float: left;
  width: 50%;
padding: 0px;
  div
  height:300px; 
}

.row:after {
  content: "";
  display:table;
  clear: both;}


@media only screen and (max-width: 768px) {
  [class*="col-"] {
    width: 100%;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I would start by running your html through a validator. There are a good amount of errors in your code, and could be that the errors are preventing you from passing that step

https://validator.w3.org/nu/#textarea

1 Like

Yeah I’m still getting the hang of it, I’m not fully finished but i appreciate it! That definitely helps.