Complete and Present a Multi-Platform Compatible Portfolio

A finished portfolio isn't just about looking good on your screen - it must work consistently across different devices, browsers, and screen sizes. This means checking layout behavior, readability, navigation, and responsiveness to ensure that your content remains clear and usable whether it's viewed on a phone, tablet, or desktop.

In this final step, you'll review, refine, and present your portfolio as a complete product. The goal is not perfection, but confidence: understanding why your site works, how it adapts, and how to make small improvements when it doesn't.

Making Your Portfolio Responsive Step-by-Step

Step 1: Add the Viewport Meta Tag (Required Foundation)

If your portfolio does not already include this line, responsiveness will not work correctly on mobile devices.

In your <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1">

Why this matters: This tells mobile browsers to use the device's actual screen width instead of pretending your page is desktop-sized and zoomed out.

Step 2: Start with a Mobile-First Layout

Before adding media queries, your layout should work naturally on small screens.

Check your base CSS:

• Avoid fixed widths like width: 1200px
• Use relative units (%, rem, fr)
• Stack sections vertically by default

Example (safe defaults):

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

main {
  padding: 1rem;
}

Goal: Your portfolio should be readable and usable on a phone before any media queries are applied.

Step 3: Make Images and Media Flexible

Prevent images from breaking your layout.

img {
  max-width: 100%;
  height: auto;
}

Test it:

• Resize the browser
• Images should shrink with the layout
• No horizontal scrolling should appear

Step 4: Use Flexbox or Grid for Responsive Layout

Choose one layout system (students don't need both).

Example: Flexbox for a Portfolio Section

.projects {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

This stacks items vertically on small screens - perfect for mobile.

Step 5: Add a Media Query for Larger Screens

Now enhance the layout when space allows.

@media (min-width: 768px) {
  .projects {
    flex-direction: row;
  }
}

What this does:

• Mobile: projects stack
• Tablet/Desktop: projects sit side-by-side

This is the core responsive pattern students should internalize.

Step 6: Improve Readability Across Screen Sizes

Adjust spacing and typography for larger screens.

@media (min-width: 768px) {
  main {
    max-width: 960px;
    margin: 0 auto;
  }
}

Why:

• Prevents long, unreadable line lengths
• Makes the portfolio feel intentional and professional

Step 7: Test Responsiveness Actively (Not Passively)

Required Testing Actions

Students should explicitly do the following:

• Resize the browser window slowly
• Test at phone, tablet, and desktop widths
• Open DevTools → Toggle device toolbar
• Observe:
• Layout shifts
• Text wrapping
• Navigation usability

Step 8: Make One Intentional Responsive Improvement

Students must identify and fix one responsiveness issue, such as:

• Navigation wrapping awkwardly
• Content becoming too wide
• Images overflowing
• Columns too narrow on tablet

They should be able to answer:

What changed, why it was a problem, and how you fixed it

(This mirrors the debugging mindset from 6.2 beautifully.)

Responsive Design Checklist

• Viewport meta tag is present
• No horizontal scrolling on mobile
• Images scale within their containers
• Layout adapts at least one breakpoint
• Content remains readable at all sizes
• Navigation works across screen widths
• Portfolio looks intentional on mobile and desktop

Try It Now: Make Your Portfolio Responsive

Activity (student-facing):

1. Open your portfolio in the browser
2. Resize the window from narrow to wide
3. Identify one layout issue
4. Add or adjust CSS to fix it
5. Retest and confirm the improvement

Reminder: The goal is not perfection - it's understanding how responsive design decisions affect real users.

The "Magic" Section: Portfolio Readiness Checklist

Portfolio Readiness Checklist

Use this checklist to ensure your portfolio is consistent, usable, and responsive across platforms:

Structure & Content

• Headings follow a clear hierarchy (h1 → h2 → h3)
• Content sections are grouped using semantic HTML (header, main, section, footer)
• Navigation links work and are easy to understand

Styling & Layout

• Fonts are readable on both large and small screens
• Color contrast supports readability
• Layout adapts without overlapping, clipping, or horizontal scrolling

Responsive Behavior

• Page reflows cleanly when the browser window is resized
• Layout works on mobile, tablet, and desktop widths
• Images and media scale within their containers

Accessibility & Usability

• Images include appropriate alt text
• Links are descriptive (not just "click here")
• Content is navigable using keyboard and screen resizing

Final Review

• No broken links or missing assets
• CSS and HTML validate without critical errors
• Portfolio communicates who you are and what you built

Try It Now: Multi-Platform Test Pass

Before submitting your portfolio:

1. View your site on at least two screen sizes
2. Resize your browser window slowly and watch layout changes
3. Test your site in at least one different browser
4. Identify one improvement you made during testing - and why

Source: Khalil Abdullah and Saylor University
This work is licensed under a Creative Commons Attribution 4.0 License.