Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Stuck on step 4: The projects section should contain at least one element with a class of project-tile to hold a project. I have the class in the figcaption elements but not sure why it wont pass?

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Portfolio Page</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='stylesheet' href='styles.css'>
    </head>
    <body>
     <header> <navbar id='navbar'>
        <a id='about-link' href='#about'>About</a>
        <a id='projects-link' href='#projects'>Projects</a>
        <a id='contact-link' href='#contact'>Contact</a>
        </navbar>
        </header>
        <section id='welcome-section'>
          <h1 id='welcome-header'>Hey I am Emma</h1>
           <p id='welcome-sub'>a web developer</p>
          </section>
      <section id='projects'>
            <h1 id='projects-header'>Projects</h1>
            <p id='projects-sub'> Check out my recent projects<p>
              <div id='project-images'>
                <div id='project-1' width='236px'>
                 <img id='project1-image' src="https://live.staticflickr.com/65535/53098037703_531d748498_n.jpg"  height="183" alt="Tribute Page"/>
                 <figcaption class='project-title'>Tribute Page</figcaption>
              </div>
            <div id='project-2'>
                <a href='https://www.freecodecamp.org/fcc7763da82-f345-4f98-92a7-467a8a13f950'>
                <img id='project2-image' src="https://live.staticflickr.com/65535/53098055143_5484e4667a_n.jpg" width="320" height="183" alt="Landing Page"/>
              </a>
                <figcaption class='project-title'>Landing Page</figcaption>
              </div>
          <div id='project-3'>
              <img id='project3-image' src="https://live.staticflickr.com/65535/53097758999_6838180982_n.jpg"  height="183" alt="Piano"/>
              <figcaption class='project-title'>Piano</figcaption></div>
          </div>
            </section>
            <section id='contact'>
              <h1 class='contact-header'>Contact</h1>
              <h3 class='contact-sub'>Let's work together...</h3>
             <div id='contact-div'><a id='profile-link' href='https://www.freecodecamp.org/fcc7763da82-f345-4f98-92a7-467a8a13f950'target='_blank' ><img id='profile-icon'src='https://images.crunchbase.com/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/ikqra03zdnggljdu5vv0' width='70px'/></a>
             <a id='email-link' href='mailto:emmanolanx@hotmail.com'><img id='email-icon'src='https://png.pngtree.com/png-vector/20190927/ourmid/pngtree-email-icon-png-image_1757854.jpg' width='70px'/> 
             </div>
             </section>
      </body>
      <footer>
        </footer>
  </html>

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage`Preformatted text`

2

that’s not good, because figcation is for describing images.

you should add that class to section, or to div perhaps.

3

I have tried this, i have basically tried putting it in all the different elements within the #projects but it still seems to fail. See below for the class within the div elements instead.

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Portfolio Page</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='stylesheet' href='styles.css'>
    </head>
    <body>
     <header> <navbar id='navbar'>
        <a id='about-link' href='#about'>About</a>
        <a id='projects-link' href='#projects'>Projects</a>
        <a id='contact-link' href='#contact'>Contact</a>
        </navbar>
        </header>
        <section id='welcome-section'>
          <h1 id='welcome-header'>Hey I am Emma</h1>
           <p id='welcome-sub'>a web developer</p>
          </section>
      <section id='projects'>
            <h1 id='projects-header'>Projects</h1>
            <p id='projects-sub'> Check out my recent projects<p>
              <div id='project-images'>
                <div class='project-title' id='project-1' width='236px'>
                 <img id='project1-image' src="https://live.staticflickr.com/65535/53098037703_531d748498_n.jpg"  height="183" alt="Tribute Page"/>
                 <figcaption>Tribute Page</figcaption>
              </div>
            <div class='project-title' id='project-2'>
                <a href='https://www.freecodecamp.org/fcc7763da82-f345-4f98-92a7-467a8a13f950'>
                <img id='project2-image' src="https://live.staticflickr.com/65535/53098055143_5484e4667a_n.jpg" width="320" height="183" alt="Landing Page"/>
              </a>
                <figcaption>Landing Page</figcaption>
              </div>
          <div class='project-title' id='project-3'>
              <img id='project3-image' src="https://live.staticflickr.com/65535/53097758999_6838180982_n.jpg"  height="183" alt="Piano"/>
              <figcaption >Piano</figcaption></div>
          </div>
            </section>
            <section id='contact'>
              <h1 class='contact-header'>Contact</h1>
              <h3 class='contact-sub'>Let's work together...</h3>
             <div id='contact-div'><a id='profile-link' href='https://www.freecodecamp.org/fcc7763da82-f345-4f98-92a7-467a8a13f950'target='_blank' ><img id='profile-icon'src='https://images.crunchbase.com/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/ikqra03zdnggljdu5vv0' width='70px'/></a>
             <a id='email-link' href='mailto:emmanolanx@hotmail.com'><img id='email-icon'src='https://png.pngtree.com/png-vector/20190927/ourmid/pngtree-email-icon-png-image_1757854.jpg' width='70px'/> 
             </div>
             </section>
      </body>
      <footer>
        </footer>
  </html>
4

image
project-title is not the same project-tile which is what you are supposed to be using

You also have some other html issues

  1. HTML doesn’t have a <navbar> tag. If you meant to use a element for navigation, you should use the <nav> tag.
  2. Some tags, like the <p> tag in your ‘projects-sub’, are not closed properly.
  3. The <footer> tag is outside the <body> tag, which is incorrect. All content that should be rendered in the browser must be within the <body> tag.
  4. In the contact section, there’s a missing closing </a> tag for the email link.
5

Hello, thank you! I didn’t even notice it said tile rather than title - would have been here for ages :sweat_smile: Thank you for the code clean up too, i hadn’t done my final look through, but will scan through all of it now! :grinning:

2 Likes
6

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