Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Hello, I am trying to post a screenshot of my project. How do I download and post it? My projects we’re created un freecodecamp but I also transferred it to CodePen.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Personal Portfolio Webpage</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <nav id="navbar">
      <ul id="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>

    <section id="welcome-section" class="welcome-section">
      <h1>I'm Cristofer Hernandez</h1>
      <p>a Web Developer</p>
    </section>

    <section id="projects" class="projects">
      <h2>Below is a list of some of my projects</h2>
      <div class="projects-grid">
        <a href="">
          <img src="https://cdpn.io/calamalink/fullpage/rNQJXmM?nocache=true&view=fullpage" alt="Survey Form" class="project-img"/>
          <p class="project-title">Survey Form</p>
        </a>
      </div>
    </section>

    <section id="contact" class="contact"></section>
  </body>
</html>

/* file: styles.css */
body {
  font-family: brandon-grotesque, sans-serif;
  margin: 0;
  padding: 0;
}

#navbar {
  background-color: #133DE2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#nav-list {
  display: flex;
  flex-direction: row;
}

li {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
  font-size: 1.5em;
  padding: 1rem 2rem;
}

a:hover {
  background-color: #45567d;
}

#welcome-section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #7C7C7C;
  background-image: linear-gradient(
    62deg,
    #3a3d40 0%,
    #181719 100%
  );
}

h1 {
  color: white;
  font-size: 4rem;
  font-weight: 700;
}

#welcome-section > p {
  color: #133DE2;
  font-size: 2rem;
  font-style: italic;
  font-weight: 100;
}

.projects {
  margin: 0;
  padding: 10rem 2rem;
  text-align: center;
  background-color: #45567d;

}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Hi, how are you? Maybe I misunderstood, but if what you want is to publish it to access with a domain for example: https://mywebsite.com you have to use a platform that gives you a server. If that was your question, then I recommend that you keep learning before publishing your website.

3

You can also watch this tutorial on how to publish your website: How to Publish an HTML Website on Netlify or GitHub Pages

4

I am trying to post a screenshot on to my project but nothing appears. I am doing it through freecodecamp.

5

Ok, so I don’t know what you mean. Here’s what I mean by “screenshot”

Captura de pantalla de 2023-07-14 23-48-03
Captura de pantalla de 2023-07-14 23-48-031600×900 244 KB

6

I wanna screenshot a project that I wanna post on Personal Portfolio page.

7

Sorry for not explaining it well.

8

The project I wanna take a screenshot of, is my Survey Form.

9

Ok, I understand now. You have to take a screenshot locally and upload it somewhere like GitHub, then reference that screenshot uploaded to github:

< img src="https://raw.githubusercontent.com/garciapereirajuan/Imagenes/main/destino-producto2.png" alt="Survey Form" class="project-img"/>

This is just an example for you to see that it works:

Captura de pantalla de 2023-07-14 23-54-47
Captura de pantalla de 2023-07-14 23-54-471600×900 202 KB

10

I got it, muchas gracias. I’ll let you know if it works.

11

On this page I have my images for you to take as an example: GitHub - garciapereirajuan/Imagenes: Imagenes para proyectos. Do something similar with your screenshots.

  • Then select one (within github),
  • double-click on the image and select open in a new tab.
  • Then copy the link of the new tab that was opened (you must start with https://raw.githubusercontent.com/).
  • That link is the one that will serve you
  • :+1:
1 Like
12

It totally worked. Thank you so much, Juan. I’ll let you know if I have anymore questions.

1 Like
13

Hi, sorry to bother you but apparently, when I reopen my page, the picture is gone. How to do maintain the image to stay there permanently?

15

Hi again, actually the picture doesn’t have to go. As long as the link takes you to the image, it should work. Check that the link to the GitHub image is spelled correctly, starting with “https://raw.githubusercontent…” and ends with “.jpg” or “.png”. Also try pasting the link directly into your browser to see if your image is there.

In this portfolio: https://codepen.io/juangpereira_/full/MWJmByd all images are taken from GitHub since I made it, and there are no problems. Another thing to keep in mind is that the repository where you save your images may need to be public.

1 Like
16

So what was preventing was that it was private?

17

If before it was private and it didn’t work, and now it’s public and it works, then that’s the problem. What happens is that when a repository is private, it and its contents can only be accessed from your GitHub account. Once you leave there, for example, you try to see the content with a link externally, you will no longer have access

18

If you have previous projects on codepen, then you can use their screenshots feature and get the link for the previews from there

2 Likes
19

Thank you for explaining it to me. Really appreciate it. Juan.

20

Thank you. I’ll take it for consideration.

21

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