Coding Examples

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
  }
}

Technologies Used:

• Sass (SCSS) with responsive breakpoint variables
• CSS Grid for fluid, column-based layouts
• Max-width container to keep content centered

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

Outcomes:

• Consistent card sizing and spacing across breakpoints
• Predictable gutters and alignment in a 1200px container
• No JavaScript needed for layout responsiveness

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';
  }
}

Technologies Used:

• Modern JavaScript (ES6+), async/await
• Fetch API for HTTP requests
• DOM APIs with optional chaining for safety

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

Outcomes:

• Smoother UX with a clear loading state
• Resilient behavior on network/image errors
• Dynamic image and credit updates without page reloads

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; }
  }
}

Technologies Used:

• CSS Grid with responsive media queries
• Progressive enhancement from single to two columns
• Semantic class structure for maintainability

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

Outcomes:

• Stable layout with no validation-induced shifting
• Improved readability and form flow on larger screens
• Easier to extend with additional fields and rows

Example 4: Advanced Query Builder with Dynamic Filtering & Sorting

Complex search, filter, and sort implementation in a Laravel EmployeeController demonstrating advanced Eloquent query building with relationship handling.

PHP/Laravel Code:

public function index(Request $request)
{
    $query = Employee::with(['company', 'user']);
    
    // Multi-field search with relationship queries
    if ($request->has('search') && $request->search != '') {
        $search = $request->search;
        $query->where(function($q) use ($search) {
            $q->where('first_name', 'like', "%{$search}%")
              ->orWhere('last_name', 'like', "%{$search}%")
              ->orWhere('email', 'like', "%{$search}%")
              ->orWhere('phone', 'like', "%{$search}%")
              ->orWhereHas('company', function($q) use ($search) {
                  $q->where('name', 'like', "%{$search}%");
              });
        });
    }
    
    // Dynamic sorting with relationship handling
    if ($sortField === 'company_id') {
        $query->leftJoin('companies', 'employees.company_id', '=', 'companies.id')
              ->orderBy('companies.name', $sortDirection)
              ->select('employees.*');
    } else {
        $query->orderBy($sortField, $sortDirection);
    }
    
    $employees = $query->paginate(10)->appends($request->query());
}

Technologies Used:

• PHP 8+, Laravel Eloquent ORM
• Eager loading, relationship queries, and joins
• Pagination with query-string preservation

Key Laravel Features:

• Eager loading relationships with with() to prevent N+1 queries
• Dynamic multi-field search using query scopes and closures
• Relationship querying with orWhereHas() for nested searches
• Complex join operations for sorting by related model attributes
• Pagination with query string preservation
• Conditional query building based on request parameters

Outcomes:

• Reduced database load and fewer queries via eager loading
• Accurate sorting by related entities without denormalization
• Flexible, maintainable query logic suitable for admin UIs