Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

How do I include my projects on my portfolio?:
I am having trouble including images in my portfolio. How do I include the projects in my project?
**

Norma's Portfolio

About Work <a href=“connect.hsp>”Connect

Hello my name is Norma💜 a web developer

These are some of my projects

farmer

Let's work together

FreeCodeCamp.org LinkedIn Send an email

* 
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>Norma's Portfolio</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/b98b02e413.js" crossorigin="anonymous"></script>
</head>
<body>
  <div id="navbar">
   <p class="top-bar"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design"></a></p>
<span class="about"><a href="about.hsp">About </span></a><a href="work-ethic.hsp"><span class="work">Work </span></a><a href="connect.hsp>"<span class="connect">Connect </span></a>
 
</div>
  <div id="welcome-section">
<h1 id="title">Hello my name is Norma<span id="heart">💜</span><span class="title-two"> a web developer</span></h1>

<h1 id="projects">These are some of my projects</h1>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page"><img src="https://cdn.theatlantic.com/thumbor/1eLgsh6WVKKyOvSZQj8Lghm9iGQ=/1200x800/media/img/photo/2020/04/photos-essential-work-farmers-coron/f01_1216824338/original.jpg" alt="farmer" id="image-one"/></a>

</div>
<div id="projects">
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"></a>
</div>
<div id="bottom">
<h1 class="together">Let's work together</h2>

<p id="profile-link">
  <a src="https://www.freecodecamp.org/misslathan" alt="profile-links"><i class="fa-brands fa-free-code-camp"></i><span id="freecodecamp">FreeCodeCamp.org </span></a><a href="https://www.linkedin.com/in/norma-lathan-a10667139/" alt="linkedIn"><span class="linkedIn"><i class="fa-brands fa-linkedin"></i>LinkedIn </span></a><a href="" alt="email"><span class="email"><i class="fa-solid fa-at"></i>Send an email</span></a>
</p>
</div>
</body>
</html>

/* file: styles.css */
body{
  text-align:center;
    margin: 250px;
  font-family: sans-serif;
  background: hotpink;

}
#navbar{
position:absolute;
 right:0;
  top:0;
   margin:0 auto;
   font-family:sans-serif verdana;
   font-weight:bold;
    

}
a:link{
  text-decoration:none;
  
 
}
 

.a:hover{

transform: scale(1.5);
}



.about{
  margin-right:25px;
}
.work{
  margin-right:25px;
}
.connect{
 margin-right:25px;
}


#welcome-section{
  margin:0;
  display: block;
}
#image-one {
width:350px;
top:0;
display:flex;



}
#title{
  color:white;
  font-family:sans-serif verdana;
}
.title-two{
  display:flex;
  align-items:center;
  justify-content:center;
 
}
.linkedIn{
  margin:10px;
  color:white;
   font-size:25px;
}
.email{
  margin:10px;
  color:white;
 font-size:25px;
}
#freecodecamp{
  margin:10px;
  color:white;
  font-size:25px;
}
.fa-free-code-camp{
  color:white;
}
#projects{
  margin:250px;
  display: block;
  font-family:sans-serif verdana;
  color:white;
  left:25px;
}

type or paste code here

body{
  text-align:center;
    margin: 250px;
  font-family: sans-serif;
  background: hotpink;

}
#navbar{
position:absolute;
 right:0;
  top:0;
   margin:0 auto;
   font-family:sans-serif verdana;
   font-weight:bold;
    

}
a:link{
  text-decoration:none;
  
 
}
 

.a:hover{

transform: scale(1.5);
}



.about{
  margin-right:25px;
}
.work{
  margin-right:25px;
}
.connect{
 margin-right:25px;
}


#welcome-section{
  margin:0;
  display: block;
}
#image-one {
width:350px;
top:0;
display:flex;



}
#title{
  color:white;
  font-family:sans-serif verdana;
}
.title-two{
  display:flex;
  align-items:center;
  justify-content:center;
 
}
.linkedIn{
  margin:10px;
  color:white;
   font-size:25px;
}
.email{
  margin:10px;
  color:white;
 font-size:25px;
}
#freecodecamp{
  margin:10px;
  color:white;
  font-size:25px;
}
.fa-free-code-camp{
  color:white;
}
#projects{
  margin:250px;
  display: block;
  font-family:sans-serif verdana;
  color:white;
  left:25px;
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

I’m not sure you can without hosting the projects somewhere. You can view the code and see the projects under the settings but I don’t think you can link to it.

The simplest might be to use Codepen. But I’d suggest using a free host like Netlify instead to get a proper page (or GitHub pages, or whatever free host you want to use). Create the projects locally and use the drag and drop feature, which should be easy enough to use. The images will be hosted as well when using Netlify.

3

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