Personal Portfolio Webpage - Build a Personal Portfolio Webpage

What does media query means?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=width-device initial-scale=1.0">
  <title>Personal Portfolio Webpage</title>
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <section id="welcome-section">
    <h1>Hi I am Zeey</h1>
    <p>A web developer</p>
  </section>
  <section id="projects">
    <h1 class="project-tile">This are some of my projects</h1>
    <a href="https://codepen.io/freeCodeCamp/full/zNqgVx"></a>
    <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ"></a>
    <a href="https://codepen.io/freeCodeCamp/full/wgGVVX"></a>
  </section>
  <nav id="navbar">
    <a href="#welcome-section">About</a>
    <a href="#projects">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <a id="profile-link" href="https://codepen.io/FreeCodeCamp/" target="_blank"></a>
</body>
</html>
/* file: styles.css */
#navbar{
  position: fixed;
  top: 0;
}
.project-tile{
  font-weight: bold;
  display: flex
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Media queries are additional CSS styles for specified breakpoints (ie window screen width). This is the basis for mobile to web development to make your web application look good no matter what kind of device the user is using.

More information at W3 School with example