Build a Responsive Student Portfolio

Your task: Create a simple, single-page portfolio for a fictional student. Use a wireframe approach: basic rectangles, simple text, and clear organization. Your main goal is to demonstrate how @media screen changes the page at regular, tablet, and mobile sizes.

What your page needs

• A header with the student’s name and simple navigation.
• An introduction section with a short bio and a placeholder for a profile image.
• A projects section with three sample projects.
• A footer with a contact line.
• A responsive layout using two media queries.

Part 1 / Set up CodePen

Open CodePen and create a new Pen. Put all of your HTML and CSS in the HTML panel, including the <style> tags. You do not need a separate CSS panel for this activity.

Open CodePen

Part 2 / Start with this wireframe

Copy the starter code below into your HTML panel. It includes the basic page structure and the regular desktop layout. Your job is to complete the tablet and mobile media queries and test all three views.

<!-- Responsive Student Portfolio -->
<style>
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background: #f2f2f2;
    color: #222;
  }

  header, footer {
    padding: 20px;
    background: #d5d5d5;
  }

  nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  nav a {
    color: #222;
  }

  main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
  }

  .intro {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }

  .panel {
    background: #fff;
    border: 1px solid #bbb;
    padding: 18px;
    min-width: 0;
  }

  .projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .project {
    min-height: 120px;
    background: #e0e0e0;
    border: 1px solid #bbb;
    padding: 16px;
  }

  /* TABLET: add your media query here */


  /* MOBILE: add your media query here */


</style>

<header>
  <h1>Alex Morgan</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section class="intro" id="about">
    <div class="panel">
      <h2>About Me</h2>
      <p>
        I am a student exploring design, technology,
        and creative ideas.
      </p>
    </div>
    <div class="panel">
      <p>[ Profile Image Placeholder ]</p>
    </div>
  </section>

  <section id="projects">
    <h2>My Projects</h2>
    <div class="projects">
      <article class="project">
        Project 01
      </article>
      <article class="project">
        Project 02
      </article>
      <article class="project">
        Project 03
      </article>
    </div>
  </section>
</main>

<footer id="contact">
  Contact: alex@example.com
</footer>

Part 3 / Add the tablet layout

Find the tablet comment inside the CSS. Write a media query that applies when the screen is 850 pixels wide or narrower.

• Change .projects from three columns to two.
• Keep the introduction side by side for now.
• Resize the preview to see when the new rule takes effect.

Part 4 / Add the mobile layout

Find the mobile comment. Write a second media query for screens 600 pixels wide or narrower.

• Change .projects to one column.
• Change .intro to one column.
• Make sure all text and project panels fit within the screen.

Part 5 / Test all three views

Use the CodePen preview and resize it. Check the layout at approximately these widths:

• Regular: 1000px wide — three project columns.
• Tablet: 768px wide — two project columns.
• Mobile: 390px wide — one project column and a stacked introduction.