Coding Examples
{Responsive Design}

Here are some real coding examples from this portfolio website that showcase modern responsive design techniques and best practices.

Example 1: Responsive Portfolio Grid

This portfolio grid demonstrates modern responsive design using CSS Grid with automatic column adjustments based on screen size.

SCSS Code:
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr; // 1 column by default
  gap: 30px;
  padding: 20px;
  box-sizing: border-box;
  justify-items: center;

  // Responsive Breakpoints
  @media (min-width: $brk-point-sm) {
    grid-template-columns: 1fr 1fr; // 2 columns on small screens
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: $brk-point-lg) {
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr; 
    // 3 columns on large screens
  }
}

Key Features:

  • Mobile-first approach (1 column by default)
  • Progressive enhancement for larger screens
  • Automatic spacing with CSS Grid gap
  • Responsive container with max-width constraint

Example 2: Async Random Photo Generator

Modern JavaScript implementation using async/await to fetch random photos from an API, with proper error handling and DOM manipulation.

JavaScript Code:
// Random Photo Generator
async function setRandomPhoto() {
  const randomBtn = document.getElementById('button-random');
  const img = document.querySelector('.primary-container img');
  const imageNameElement = document.getElementById('imagename');
  
  if (!randomBtn || !img) return;

  randomBtn.textContent = 'Loading...';

  try {
    // Fetch random photo data
    const page = Math.floor(Math.random() * 10) + 1;
    const response = await fetch
    (`https://picsum.photos/v2/list?page=${
    page}&limit=30`);
    const photos = await response.json();

    if (!Array.isArray(photos) || photos.length === 0) {
      throw new Error('No photos available');
    }

    // Select random photo
    const photo = photos[Math.floor(Math.random() 
    * photos.length)];
    
    // Update image with loading handlers
    img.onload = () => {
      randomBtn.textContent = 'Random Photo';
      window.checkAddButtonState?.();
    };
    
    img.onerror = () => {
      randomBtn.textContent = 'Random Photo';
      console.error('Failed to load image');
    };

    // Set new image
    img.src = `https://picsum.photos/id/${photo.id}/800/600`;
    img.setAttribute('data-picsum-id', photo.id);
    
    // Update photo credit
    if (imageNameElement) {
      imageNameElement.textContent = `Photo by ${photo.author}`;
    }

  } catch (error) {
    console.error('Error fetching photo:', error);
    randomBtn.textContent = 'Random Photo';
  }
}

Key JavaScript Features:

  • Async/await for clean asynchronous code handling
  • Fetch API for modern HTTP requests
  • Comprehensive error handling with try/catch blocks
  • DOM manipulation with proper element validation
  • Event listeners and dynamic content updates
  • Optional chaining for safe method calls

Example 3: Responsive Contact Form Layout

A contact form that adapts its layout using CSS Grid, transitioning from single-column on mobile to multi-column on larger screens.

SCSS Code:
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr; // Single column by default
  row-gap: 10px;
  
  // Form field positioning
  .first-name { grid-column: 1; grid-row: 1; }
  .last-name { grid-column: 1; grid-row: 2; }
  .email { grid-column: 1; grid-row: 3; }
  
  // Responsive: Two columns on medium screens
  @media (min-width: 576px) {
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    
    .name-row { display: contents; }
    .first-name { grid-column: 1; grid-row: 1; }
    .last-name { grid-column: 2; grid-row: 1; }
    .email { grid-column: 1 / span 2; grid-row: 2; }
  }
}

Responsive Features:

  • Grid layout automatically adjusts form structure
  • Name fields side-by-side on larger screens
  • Full-width fields span multiple columns when needed
  • Consistent spacing maintained across breakpoints