Personal Portfolio Webpage - Question about project section

HTML-CSS
1

Not really a question about my code, but what’s a good way to add previews of my projects like in the example portfolio? I’m not sure how to link them unless I move all my code to an IDE so that i can use my local files.

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>My Portfolio</title>
    <link href="./styles.css" rel="stylesheet"/>
</head>
<body>
<!--Nav Start-->
  <nav id='navbar'>
    <ul id='nav-list'>
      <li><a href='#welcome-section'>About</a></li>
      <li><a href='#projects'>Projects</a></li>
      <li><a href='#contacts'>Contact</a></li>
    </ul>
  </nav>
<!--Nav End-->
<!--Welcome Section Start-->
  <section id='welcome-section'>
    <h1>Hello, I am Bryan</h1>
    <p>an aspiring web developer</p>
  </section>
<!--Welcome Section End-->
<!--Project Section Start-->
  <section>
    <h2></h2>
    <div id='projects'>
      
    </div>
  </section>
<!--Project Section End-->
</body>
</html>

/* file: styles.css */
:root {
  --main-gray: #303841;
  --main-blue: #1e90ff;
  --dark-gray: #212529;
}

* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

#navbar li {
  list-style: none;
}

li a {
  text-decoration: none;
  color: white;
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--main-blue);
}

#nav-list {
  display: flex;
  height: 70px;
  align-items: center;
  margin-right: 1rem;
}

li a {
  font-family: Monospace, Tahoma, sans-serif;
  font-size: 25px;
  padding: 10px;
}

body {
  
}

section {
  display: block;
}

#welcome-section {
  height: 100vh;
  width: 100%;
  background-color: var(--dark-gray);
  background-image: linear-gradient(150deg, var(--dark-gray) 50%, var(--main-blue) 70%, var(--dark-gray) 85%);
}

#welcome-section, h1, p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: Tahoma, sans-serif;
  color: white;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

#welcome-section p {
  font-family: Tahoma, sans-serif;
  color: var(--main-blue);
  font-size: 1.5rem;
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

the example portfolio is just using codepen to host everything.
you can right click on the example portfolio and choose “Inpsect” or developer tools and review the elements to see how they are created.

3

btw, you can also use the Analyze HTML, Analyze CSS and Analyze JS menu options in codepen to help you find errors.

4

I’ll look into that. Thank you!

5

sorry about that last comment. It was meant for someone else’s post actually.

6

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