Skip to main content

Course Progress

Loading...

📝 Homework: Theme Assets & Frontend

Build a Complete Frontend System

Apply everything you've learned about assets, JavaScript, CSS, and optimization

Assignment Overview

Objective: Create a fully-featured WordPress theme with a modern frontend system including responsive design, JavaScript functionality, third-party libraries, and performance optimization.

Duration: 2 weeks

Difficulty: Advanced

Points: 100 points

💡
Project Scope
You'll be building a portfolio/agency theme with advanced frontend features including animations, sliders, AJAX functionality, and optimized performance.

📋 Project Requirements

Part 1: Asset Organization (15 points)

  • Create proper directory structure for assets
  • Organize CSS, JavaScript, images, and fonts
  • Set up source and distribution folders
  • Implement version control for cache busting
  • Create a build system (Gulp/Webpack)

Part 2: Responsive Design (15 points)

  • Implement mobile-first responsive design
  • Create responsive navigation with hamburger menu
  • Build responsive grid system (or use CSS Grid/Flexbox)
  • Make all images responsive with srcset
  • Test on multiple devices and screen sizes
  • Implement responsive typography (fluid type)

Part 3: Sass Implementation (10 points)

  • Convert all CSS to Sass/SCSS
  • Create variables for colors, fonts, and spacing
  • Build at least 5 useful mixins
  • Organize styles with partials
  • Use nesting appropriately (not too deep)
  • Implement a color scheme system

Part 4: JavaScript Functionality (20 points)

  • Properly enqueue all scripts with dependencies
  • Implement AJAX load more posts
  • Create live search functionality
  • Build smooth scroll navigation
  • Add form validation (contact form)
  • Implement like/favorite system with AJAX
  • Create interactive components (tabs, accordions)
  • Use wp_localize_script for data passing

Part 5: jQuery Integration (10 points)

  • Use jQuery in no-conflict mode properly
  • Create at least one custom jQuery plugin
  • Implement jQuery animations
  • Handle dynamic content with event delegation
  • Provide vanilla JS alternative for one component

Part 6: Third-party Libraries (10 points)

  • Integrate Bootstrap or similar CSS framework
  • Implement Slick Slider or similar carousel
  • Add AOS (Animate On Scroll) animations
  • Include Font Awesome icons
  • Properly manage library dependencies

Part 7: Performance Optimization (20 points)

  • Minify all CSS and JavaScript
  • Implement lazy loading for images
  • Extract and inline critical CSS
  • Configure browser caching (.htaccess)
  • Optimize all images (compress, WebP)
  • Achieve 85+ PageSpeed Insights score
  • Implement service worker for offline
  • Remove unused CSS and JavaScript
  • Use async/defer for script loading
  • Add resource hints (preload, prefetch)

📦 Deliverables

Required Files:

your-theme/
├── style.css // Theme information header
├── functions.php // All enqueuing and optimization code
├── package.json // NPM dependencies
├── gulpfile.js or webpack.config.js // Build configuration
├── .htaccess // Caching rules
├── service-worker.js // Offline functionality
├── src/ // Source files
│   ├── scss/
│   │   ├── main.scss
│   │   ├── abstracts/
│   │   ├── components/
│   │   ├── layout/
│   │   └── pages/
│   ├── js/
│   │   ├── main.js
│   │   ├── ajax.js
│   │   ├── search.js
│   │   └── modules/
│   └── images/
├── dist/ or assets/ // Compiled/optimized files
│   ├── css/
│   │   ├── style.min.css
│   │   └── critical.min.css
│   ├── js/
│   │   └── main.min.js
│   └── images/
├── vendor/ // Third-party libraries (if not using NPM)
├── templates/
│   ├── hero-slider.php
│   ├── portfolio-grid.php
│   └── contact-form.php
└── README.md // Documentation

Documentation Requirements:

  • README with setup instructions
  • Build process documentation
  • List of all third-party libraries used
  • Performance optimization report
  • Browser compatibility notes
  • Screenshots of responsive breakpoints

Demo Content:

  • Homepage with hero slider
  • Portfolio/gallery page with filtering
  • Blog page with AJAX load more
  • Contact page with validated form
  • About page with animations

📊 Grading Rubric

Criteria Excellent Good Needs Improvement Points
Asset Organization Perfect structure, build system works flawlessly Good organization, minor issues Basic organization, no build system /15
Responsive Design Flawless on all devices, creative solutions Works well, minor breakpoint issues Basic responsive, some broken layouts /15
Sass Implementation Advanced usage, well-organized, DRY code Good usage, some repetition Basic usage, mostly like CSS /10
JavaScript All features work perfectly, clean code Most features work, minor bugs Basic functionality, several issues /20
jQuery Proper no-conflict, creative plugin Works correctly, basic plugin Some conflicts, no custom plugin /10
Libraries Perfect integration, no conflicts Good integration, minor issues Basic integration, some problems /10
Performance 90+ PageSpeed, all optimizations 80+ PageSpeed, most optimizations 70+ PageSpeed, basic optimizations /20

🌟 Bonus Challenges (Extra Credit)

Additional Features (+5 points each, max 20):

  • PWA Features: Make the theme a Progressive Web App with app manifest
  • Dark Mode: Implement toggleable dark mode with CSS custom properties
  • Advanced Animations: Use GSAP or similar for complex animations
  • REST API Integration: Build a headless frontend component
  • TypeScript: Convert JavaScript to TypeScript
  • Testing: Add Jest tests for JavaScript functions
  • Accessibility: Achieve WCAG AA compliance
  • Multi-language: Implement RTL support and translations

✅ Success Criteria

  • Theme activates without errors
  • All JavaScript works without console errors
  • Responsive design works on mobile, tablet, desktop
  • AJAX functionality works smoothly
  • PageSpeed score meets requirements
  • Build process runs successfully
  • Code is well-commented and organized
  • No conflicts with WordPress core
  • Cross-browser compatibility (Chrome, Firefox, Safari, Edge)
  • Documentation is complete and clear

💡 Tips for Success

  • Start with organization: Set up your build system and file structure first
  • Test frequently: Check your work in different browsers and devices
  • Use browser DevTools: Debug JavaScript and check performance
  • Version control: Use Git to track your progress
  • Optimize images early: Don't wait until the end
  • Comment your code: Especially complex JavaScript functions
  • Follow WordPress standards: Use proper enqueuing methods
  • Ask for help: Don't struggle alone if stuck

📤 Submission Guidelines

How to Submit:

  1. Create a GitHub repository for your theme
  2. Include all source files (not just compiled)
  3. Write comprehensive README.md with:
    • Installation instructions
    • Build process steps
    • Feature list
    • Screenshots
    • Credits for third-party resources
  4. Deploy to a staging site (optional but recommended)
  5. Create a ZIP file of the theme
  6. Submit via course platform with:
    • GitHub repository link
    • Live demo link (if available)
    • ZIP file attachment
    • PageSpeed Insights screenshot

Deadline:

Due Date: End of Week 16 (2 weeks from today)

Late Policy: -5 points per day late

Common Pitfalls to Avoid:

  • Not testing in WordPress environment early
  • Forgetting to handle jQuery no-conflict mode
  • Loading too many libraries unnecessarily
  • Not optimizing images before submission
  • Missing responsive breakpoints
  • JavaScript errors in console
  • Forgetting to minify for production
  • Not documenting the build process

📚 Helpful Resources

Review These Lessons:

External Resources:

📋 Final Checklist

  • Build system configured and working
  • All assets properly organized
  • Responsive design implemented
  • Sass files created and compiled
  • JavaScript features all working
  • jQuery properly integrated
  • Third-party libraries included
  • Performance optimizations applied
  • Images optimized and lazy loaded
  • Critical CSS extracted and inlined
  • Service worker implemented
  • Browser caching configured
  • PageSpeed score checked
  • Cross-browser testing completed
  • Mobile testing completed
  • Documentation written
  • Code commented
  • GitHub repository created
  • README.md completed
  • Ready to submit!
🚀
Good Luck!

This is a comprehensive assignment that brings together everything you've learned about theme assets and frontend development. Take your time, be creative, and don't hesitate to ask questions in the course forum.

Remember: The goal is not just to complete the requirements but to create something you're proud of that demonstrates your skills as a WordPress theme developer!