Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
I can’t figure out how to access my projects from this platform. I tried saving to codepen but no luck. Not sure how to attach my projects or jpegs of my work for the project section.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" >
  </head>
  <body>
    <header id="header">
      <nav id="navbar">
        <a class="nav-link" href="#welcome-section">About Me</a>
        <a class="nav-link" href="#projects">My Work</a>
        <a class="nav-link" href="#contact-info">Contact</a>
      </nav>
    </header>
    <div id="welcome-section">
      <h1 class="name">Hi, I'm Tiffany Peters</h1>
      <h2 class="profession">I'm a Web Developer</h2>
    </div>
    <div id="projects">
      <h3 id="project-title">Here is some of my work</h3>
      </div>
      <div class="projects-grid">
        <a href="https://codepen.io/tiffrpeters/full/vYzQwrd" target="_blank" class="project-tile">
        <img class="project-image" src="www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form" alt="project"><h3>Survey Form</h3></a>
       <a href="https://codepen.io/tiffrpeters/pen/dyqwbKV" class="project-tile" target="_blank" >
        <img src="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page" alt="project"><h3>Tribute Page</h3></a>
       <a href="https://codepen.io/tiffrpeters/pen/NWLeKOm" target="_blank" class="project-tile">
        <img src="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page" alt="project"><h3>Technical Documentation Page</h3></a>
       <a href="https://codepen.io/tiffrpeters/pen/vYzvBMr" target="_blank" class="project-tile">
        <img src="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page" alt="project"><h3>Product Landing Page</h3></a>
    </div>
      <div>
        <h1>Let's Work Together...</h1>
        <h2>Here's how to contact me</h2>
      </div>
      <div class="social-icons">
        <a href="https://www.linkedin.com/in/tiffany-peters-136a63261/">
        <i class="fab fa-linkedin-in"></i></a>
        <a href="mailto:tiffrpeters@gmail.com"    
class="email-link"><i class="fa fa-envelope"></i></a>
        <a href="tel:918-210-2245" class="phone-link"><i class="fa fa-phone"></i></a>
    </div>
  </body>
  <footer>
    <p>Created for 
      <div> 
        <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo"</div>
    </p>
  </footer>
</html>

/* file: styles.css */
html {box-sizing: border-box;}

body {font-family: sans-serif, verdana; margin: 0; background: linear-gradient(#ffe4c4 90%, #fff8dc); color: #deb887;}

header {width: 100%; top: 0; display: block; text-align: right; position: sticky; line-height: 60px;}

a {font-size: 25px; padding: 10px; color: #fff8dc; font-weight: bold; text-decoration: none; align-items: center;}

nav, footer {background: #deb887;color: #fff8dc;}

h1 { font-size: 50px; text-align: center; margin-bottom: 0; margin-top: 100px}

h2 {font-size: 25px; text-align: center; margin: 0; top: 0; padding-bottom: 100px; font-weight: initial; font-style: italic;}

h3 {text-decoration: underline; text-align: center; font-size: 28px; margin-bottom: 100px}

projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;}

.project-tile {border-radius: 2px;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}

.social-icons { font-size: 5rem; display: flex;justify-content: space-between;
padding: 1rem 2rem;}

i {color: #deb887;}

:hover > i {
  transform: translateY(8px);} 

.logo {width: 200px; height: 20px; align-items: right;}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Links work fine and lead to each of your projects on the codepen. You should only make a screenshot of each project when open in full size in the codepen, after that edit it if you like or need, and upload to your GitHub account as a ‘repository’ (btw you can add all your fcc projects there - a much better solution for your personal porfolio). Then, if you right click on the uploaded image, you will get the popup window where you can choose “Copy image address”. After that, paste that address into your code (type it in the src attribute as its value).

This is just one of many solution.

3

I’ll try that! Thanks so much

1 Like
4

I cant figure out how to get my work to github. the html will go but not the css so no styling . i cant figure out how to save anything

5

Tell us what’s happening:
cannot figure out how to create, save, and access screenshots of my projects to add as my src for my project links. Someone please help!!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" >
  </head>
  <body>
    <header id="header">
      <nav id="navbar">
        <a class="nav-link" href="#welcome-section">About Me</a>
        <a class="nav-link" href="#projects">My Work</a>
        <a class="nav-link" href="#contact-info">Contact</a>
      </nav>
    </header>
    <div id="welcome-section">
      <h1 class="name">Hi, I'm Tiffany Peters</h1>
      <h2 class="profession">I'm a Web Developer</h2>
    </div>
    <div id="projects">
      <h3 id="project-title">Here is some of my work</h3>
      </div>
      <div class="projects-grid">
        <a href="https://codepen.io/tiffrpeters/full/vYzQwrd" target="_blank" class="project-tile">
        <img src="" alt="project"><h3>Survey Form</h3></a>
       <a href="https://codepen.io/tiffrpeters/pen/dyqwbKV" class="project-tile" target="_blank" >
        <img src="" alt="project"><h3>Tribute Page</h3></a>
       <a href="https://codepen.io/tiffrpeters/pen/NWLeKOm" target="_blank" class="project-tile">
        <img src="" alt="project"><h3>Technical Documentation Page</h3></a>
       <a href="https://codepen.io/tiffrpeters/pen/vYzvBMr" target="_blank" class="project-tile">
        <img src="" alt="project"><h3>Product Landing Page</h3></a>
    </div>
    <div id="contact-info">
      <h1>Let's Work Together</h1>
      <h2>Here's how to contact me...</h2>
    </div>
    <div class="social-icons">
        <a href="https://github.com/Tiffrpeters">
        <i class="fab fa-github"></i>"</a>
        <a href="https://www.linkedin.com/in/tiffany-peters-136a63261/">
        <i class="fab fa-linkedin-in"></i></a>
        <a href="mailto:tiffrpeters@gmail.com"    
class="email-link"><i class="fa fa-envelope"></i></a>
        <a href="tel:918-210-2245" class="phone-link"><i class="fa fa-phone"></i></a>
        
    </div>
  </body>
  <footer>
    <p>Created for 
      <div> 
        <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo"</div>
    </p>
  </footer>
</html>

/* file: styles.css */
html {box-sizing: border-box;}

body {font-family: sans-serif, verdana; margin: 0; background: linear-gradient(#ffe4c4 90%, #fff8dc); color: #deb887;}

header {width: 100%; top: 0; display: block; text-align: right; position: sticky; line-height: 60px;}

a {font-size: 25px; padding: 10px; color: #fff8dc; font-weight: bold; text-decoration: none; align-items: center;}

nav, footer {background: #deb887;color: #fff8dc;}

h1 { font-size: 50px; text-align: center; margin-bottom: 0; margin-top: 100px}

h2 {font-size: 25px; text-align: center; margin: 0; top: 0; padding-bottom: 100px; font-weight: initial; font-style: italic;}

h3 {text-decoration: underline; text-align: center; font-size: 28px; margin-bottom: 100px}

projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;}

.project-tile {border-radius: 2px;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}

.social-icons { font-size: 5rem; display: flex;justify-content: space-between;
padding: 1rem 2rem;}

i {color: #deb887;}

:hover > i {
  transform: translateY(8px);} 

.logo {width: 200px; height: 20px; align-items: right;}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

6

Let me make sure I understand you correctly. You are wanting to add your own pictures to this project, correct?

7

Yes, at least that is my understanding of the project requirements. Is that not what i am seeing on the sample personal portfolio page?

8

I didn’t see anything in the requirements about you needing to put images in your project. However, if you would like to do it just for an extra flare, here is an idea.
First of all, you are running code off of FFC, so you can’t create a file using a relative path like styles.css and index.html. Those files are auto-created by FFC for you, and as far as I know you can’t add another one (I could be wrong about this, I am a little new).
If you were working in your own personal computer you could create a png file and link it using relative path.
However, there is a website called snipboard.io, which allows you to create web links of images that last for 30 days. Try using it to create a url for your image, and use that as the src attribute. It won’t last forever, but it’s one thing you can try.
If you want a permanent way to get an image there forever, then I don’t know how you can do that, given that you don’t have control over the development environment.
Hope this helps!

9

Then what exactly is the project section supposed to look like if the pictures are optional? Ive been on this for hours! what should I place in the project section if not pics?

10

I’m afraid I can’t tell you, since I didn’t design the project. Sorry. :worried: