Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
I know that we are supposed to do these projects on our own but I have no idea how to get the images (the little previews of my projects) as a source code. I hope someone knows what I mean. I am grateful for any little hint I can get. Thank you:)

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" href="./styles.css">
  </head>

<body>
<!--START NAVBAR-->
      <nav id="nav-bar">
        <ul id="navbar">
          <li id="navbar"><a class="nav-link">About</a></li>
          <li id="navbar"><a class="nav-link">Work</a></li>
          <li id="navbar"><a class="nav-link">Contact</a></li>
          </ul>
   </nav>
<!--END NAVBAR-->  
    

  <!--INTRO-->
    <section id="intro" class="intro">
    <h1>Hi I am Lola</h1>
    <p>A newbie in the coding world</p>
    </section>

<!--PROJECTS SECTION-->
<section id="projects" class="projects-section">
  <h2>These are some of my projects</h2>

<div class="projects-grid">
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form" target="_blank" title="project project-title">
    <img class="project-img" alt="project" src="" />
    <p></p>
  </a>

</div>




</section>




  </body>




  </html>

/* file: styles.css */
#nav-bar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

ul#navbar{
  list-style-type: none;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  background-color: #556B2F;
}

li#navbar{
  float: left;
}

li a{
  display: block;
  color: white;
  padding: 10px 10px;
  text-decoration: none;
}


h1{
  color: #556B2F;
  font-size: 45px;
}

p{
  color: #556B2F;
  font-size: 30px;
}

#intro{
  text-align: center;
  padding: 50vh;
    background-color:	#ffe4c4;
  width: 100vw;
  height: 100vh;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

This is just an example:
Go to pixabay.com (there are a lot of similar sources). Choose an image of your preference. Right-click on the image. Select “copy image address”. Then, paste that address (called URL address) as a value for your src attribute in ‘img’ element:
<img src="here you paste your image's address" >

3

Thank you I will definitely keep that page in mind but I was mostly referring to creating URLs for images that aren’t published anywhere… let’s say I would want to use an image thats on my computer. But thank you so much anyway.

4

You can create a folder named “images” at the same place where you have saved your “index.html” file. When you refer to the photo named “photo1.png” in the folder “images”, your ‘img’ attribute ‘src’ has to be set as follows: src=“images/photo1.png”. You can use many different image file types:

5

there are websites that provide free image hosting. The image must be yours though (not taken from the web).
Try to google some up.

6

Thank you so so much you have been a great help!!

1 Like
7

Thank you I will give it a try:)

1 Like
8

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