Build a Personal Portfolio - Build a Personal Portfolio

HTML-CSS
1

Tell us what’s happening:

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

  2. Your portfolio should use at least one media query.

  3. Your #navbar element should always be at the top of the viewport.

Your code so far

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <main>
    <header>
      <img class="header-img" src="data:image/png;base64,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" alt="Freecodecamp.com logo">
      <p class="header-name">FreeCodeCamp Exclusive Portfolio</p>
      <nav id="navbar">
        <ul>
          <li><a href="www.freecodecamp">Home</a></li>
          <li>Project <a href="#project1">1</a></li>
          <li>Project <a href="#project2">2</a></li>
          <li>Project <a href="#project3">3</a></li>
        </ul>
      </nav>
    </header>
    <body>
      <div class="welcome-tile">
        <section id="welcome-section">
          <h1>My Portfolio</h1>
          <p>As a Web Developer</p>
          <p><a id="profile-link" href="https://www.freecodecamp.org/learn/full-stack-developer/" target="_blank">My Full Portfolio</p>
        </section>
      </div>

      <div class="project-tile">
        <section id="project-section">
          <h2>Projects</h2>
          <p>Some of my most recent and notable projects</p>
          <div id="project1">
            <h3 class="project-title">Project #1</h3>
            <img id="pi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpZJq08f_B8pAoxfBadyRr8oNm82SuA2entQ&s" alt="backdrop of tech-style square line design">
            <a id="pjl" target="_blank" href="www.freecodecamp.org">Project on website design and layout</a>
          </div>

          <div id="project2">
            <h3 class="project-title">Project #2</h3>
            <img id="pi" src="https://image.slidesdocs.com/responsive-images/background/simulated-desktop-and-monitors-with-color-computer-design-%E2%80%93-powerpoint-background_cd014fcb32__960_540.jpg" alt="AI generated computer with speaker sound waves">
            <a id="pjl" href="www.freecodecamp.org" target="_blank">Project on CSS graphic design and animation</a>
          </div>
          <div id="project3">
            <h3 class="project-title">Project #3</h3>
            <img id="pi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTw20x0jcWfegEHr3o9ipjnSMAr9YaUu2TWUw&s" alt="zoomed in picture of the details on a computer microchip">
            <a id="pjl" href="www.freecodecamp.org">Project of navigational page</a>
          </div>
        </section>
      </div>
      <div ></div>
    </body>
  </main>
</html>


html {
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  display: block;
  background-color: grey;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  height: 80px;
}

.header-img {
  width: 25vw;
  max-width: 180px;
  margin-right: -65px;
  display: inline-block;
  vertical-align: top;
  opacity: 50%;
}

.header-name {
  display: inline-block;
  margin-left: 70px;
  margin-top: 0;
  font-size: minmax(2.8vw, 20px);
  vertical-align: top;
  text-align: center;
}

#navbar {
  display: inline-block;
  vertical-align: top;
  margin-top: -15px;
  margin-right: 25px;
  float: right;
}

#navbar ul {
  list-style: none;
}

#welcome-section, #project-section {
  text-align: center;
  height: 100vh;
  margin: auto 0;
}

#welcome-section {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.welcome-tile {
  background-color: rgb(184, 68, 68);
  width: 100%;
  height: 100vh;
}

#pi {
  display: block;
  margin: 0 auto;
  width: 300px;
}

#project-section {
  margin: 0 0 0 0;
  padding: 0;
  border: 2px solid yellow;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.project-tile {
  background-color: rgb(192, 106, 106);
  width: 100%;
  min-height: 200vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build a Personal Portfolio - Build a Personal Portfolio

2

if you want the tests to recognize your code, you need to make sure that your code is valid.

You can use an online validator like this one to check

Once you pasted your code into it and clicked Check it will print out all the Errors you need to fix to make your code valid.

3

I used the checker, fixed some things, and now I have no errors on my html or css. I passed 11 and 12, but 5 still isn’t working? I cant find anything wrong with the class=“project-tile” and I don’t see why it wouldnt be working. here is the new and improved code.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" >
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <img class="header-img" src="data:image/png;base64,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" alt="Freecodecamp.com logo">
      <p class="header-name">FreeCodeCamp Exclusive Portfolio</p>
      <nav id="navbar">
        <ul>
          <li><a href="www.freecodecamp">Home</a></li>
          <li>Project <a href="#project1">1</a></li>
          <li>Project <a href="#project2">2</a></li>
          <li>Project <a href="#project3">3</a></li>
        </ul>
      </nav>
    </header>



    
      <div class="welcome-tile">
        <section id="welcome-section">
          <h1>My Portfolio</h1>
          <p>As a Web Developer</p>
          <p><a id="profile-link" href="https://www.freecodecamp.org/learn/full-stack-developer/" target="_blank">My Full Portfolio</a></p>
        </section>
      </div>

      <div class="project-tile">
        <section id="project-section">
          <h2>Projects</h2>
          <p>Some of my most recent and notable projects</p>
          <div id="project1">
            <h3 class="project-title">Project #1</h3>
            <img class="pi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpZJq08f_B8pAoxfBadyRr8oNm82SuA2entQ&s" alt="backdrop of tech-style square line design">
            <a class="pjl" target="_blank" href="www.freecodecamp.org">Project on website design and layout</a>
          </div>

          <div id="project2">
            <h3 class="project-title">Project #2</h3>
            <img class="pi" src="https://image.slidesdocs.com/responsive-images/background/simulated-desktop-and-monitors-with-color-computer-design-%E2%80%93-powerpoint-background_cd014fcb32__960_540.jpg" alt="AI generated computer with speaker sound waves">
            <a class="pjl" href="www.freecodecamp.org" target="_blank">Project on CSS graphic design and animation</a>
          </div>
          <div id="project3">
            <h3 class="project-title">Project #3</h3>
            <img class="pi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTw20x0jcWfegEHr3o9ipjnSMAr9YaUu2TWUw&s" alt="zoomed in picture of the details on a computer microchip">
            <a class="pjl" href="www.freecodecamp.org">Project of navigational page</a>
          </div>
        </section>
      </div>
      <div ></div>
    </body>
</html>

html {
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

header {
  display: block;
  background-color: grey;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  height: 80px;
}

.header-img {
  width: 25vw;
  max-width: 180px;
  margin-right: -65px;
  display: inline-block;
  vertical-align: top;
  opacity: 50%;
}

.header-name {
  display: inline-block;
  margin-left: 70px;
  margin-top: 0;
  font-size: 30px;
  vertical-align: top;
  text-align: center;
}

#navbar {
  display: inline-block;
  vertical-align: top;
  margin-top: -15px;
  margin-right: 25px;
  float: right;
}

#navbar ul {
  list-style: none;
}

#welcome-section, #project-section {
  text-align: center;
  height: 100vh;
  margin: auto 0;
}

#welcome-section {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.welcome-tile {
  background-color: rgb(184, 68, 68);
  width: 100%;
  height: 100vh;
}

.pi {
  display: block;
  margin: 0 auto;
  width: 300px;
}

#project-section {
  margin: 0 0 0 0;
  padding: 0;
  border: 2px solid yellow;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.project-tile {
  background-color: rgb(192, 106, 106);
  width: 100%;
  min-height: 200vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
  .header-name {
    font-size: 3vw;
  }
}
4

project-tile would need to be the tile for a single project, so it needs to go inside project-section

The projects section should contain at least one element with a class of project-tile to hold a project.