Lesson 7.4: Project Exercises

Welcome to the capstone exercises! This lesson brings together everything you've learned - from file management to web server configuration - in comprehensive hands-on challenges.

Real-World Challenge: These exercises simulate actual web development tasks you'll encounter. Complete them successfully and you'll have proven your Linux skills!

Exercise 1: Complete Website Deployment

Deploy a complete website with all the skills you've learned:

Requirements

Step-by-Step Guide

Part A: Website Creation

  1. Create project directory structure
  2. Build HTML pages with semantic markup
  3. Create responsive CSS with mobile support
  4. Add images with optimization
  5. Include meta tags for SEO
Click for detailed steps
$ mkdir -p ~/project-site/{css,images,js} $ cd ~/project-site # Create index.html $ nano index.html # Add semantic HTML5 structure # Create about.html $ nano about.html # Add professional about page # Create contact.html $ nano contact.html # Add contact form and information # Create CSS $ nano css/style.css # Add responsive design and animations # Add images $ wget https://example.com/logo.png -O images/logo.png

Part B: Nginx Configuration

  1. Create custom Nginx configuration
  2. Set up proper security headers
  3. Configure caching for performance
  4. Enable gzip compression
  5. Test configuration syntax
Click for configuration details
$ sudo nano /etc/nginx/sites-available/project-site # Add advanced configuration: server { listen 80; server_name localhost; root /home/valente/project-site; index index.html; # Security headers add_header X-Frame-Options "SAMEORIGIN"; add_header X-Content-Type-Options "nosniff"; add_header X-XSS-Protection "1; mode=block"; # Performance optimization gzip on; gzip_types text/plain text/css application/javascript; # Caching location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } error_page 404 /404.html; } # Test and enable $ sudo nginx -t $ sudo ln -s /etc/nginx/sites-available/project-site /etc/nginx/sites-enabled/ $ sudo rm /etc/nginx/sites-enabled/default $ sudo systemctl reload nginx

Part C: Testing and Validation

  1. Test website in multiple browsers
  2. Validate HTML and CSS
  3. Check mobile responsiveness
  4. Test page load speed
  5. Verify all links work
Click for testing commands
# Test with curl $ curl -I http://localhost/ # Check HTML validation $ sudo apt install tidy $ tidy -qe ~/project-site/index.html # Test mobile view (use browser dev tools) # Check with: http://localhost/ on mobile device # Performance test $ time curl -s http://localhost/ > /dev/null # Link checking $ find ~/project-site -name "*.html" -exec grep -H "href=" {} \;

Exercise 2: Advanced File Management

Practice complex file management scenarios:

Scenario: Website Redesign

You need to reorganize your website structure for a redesign:

Task Requirements

  • Create backup of current site
  • Reorganize files into new structure
  • Update all internal links
  • Remove old files safely
  • Document the new structure
Click for solution approach
# Create timestamped backup $ cp -r ~/project-site ~/backups/site-$(date +%Y%m%d_%H%M%S) # Create new structure $ mkdir -p ~/project-site-new/{assets/{css,js,images},pages,includes} # Move files to new structure $ mv ~/project-site/*.html ~/project-site-new/pages/ $ mv ~/project-site/css/* ~/project-site-new/assets/css/ $ mv ~/project-site/images/* ~/project-site-new/assets/images/ # Update internal links $ find ~/project-site-new/pages -name "*.html" -exec sed -i 's|css/|assets/css/|g' {} \; # Test new structure $ sudo rm /etc/nginx/sites-enabled/project-site $ sudo ln -s /etc/nginx/sites-available/project-site /etc/nginx/sites-enabled/ $ sudo sed -i 's|/home/valente/project-site|/home/valente/project-site-new|g' /etc/nginx/sites-available/project-site $ sudo nginx -t && sudo systemctl reload nginx # Replace old with new (after testing) $ rm -rf ~/project-site $ mv ~/project-site-new ~/project-site # Document structure $ tree ~/project-site > ~/project-site/STRUCTURE.txt $ cat ~/project-site/STRUCTURE.txt

Exercise 3: Troubleshooting Challenge

Diagnose and fix common web server issues:

Scenario: Website Not Loading

Your website suddenly stops working. Diagnose and fix the issue:

Troubleshooting Steps

  1. Check if Nginx is running
  2. Test Nginx configuration syntax
  3. Check file permissions
  4. Review Nginx error logs
  5. Test with curl for detailed errors
  6. Check firewall settings
  7. Verify port availability
Click for troubleshooting commands
# Check service status $ sudo systemctl status nginx # Test configuration $ sudo nginx -t # Check file permissions $ ls -la ~/project-site/ $ namei -l ~/project-site/ # Review error logs $ sudo tail -f /var/log/nginx/error.log $ sudo journalctl -u nginx -f # Test with detailed output $ curl -v http://localhost/ $ curl -I http://localhost/ # Check firewall $ sudo ufw status $ sudo ss -tlnp | grep :80 # Check port availability $ telnet localhost 80

Exercise 4: Performance Optimization

Optimize your website for better performance:

Optimization Tasks

Performance Improvements

  1. Enable browser caching
  2. Compress static files
  3. Optimize images
  4. Minify CSS and JavaScript
  5. Implement lazy loading
  6. Use CDN for static assets
Click for optimization techniques
# Image optimization $ sudo apt install imagemagick $ mogrify -resize 80% -quality 85 images/*.jpg # CSS minification $ sudo apt install cssmin $ cssmin css/style.css css/style.min.css # Enable advanced caching in Nginx $ sudo nano /etc/nginx/sites-available/project-site # Add to server block: location ~* \.(css|js)$ { expires 1y; add_header Cache-Control "public, immutable"; } # Gzip compression gzip on; gzip_comp_level 6; gzip_min_length 1000; gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript; # Performance testing $ curl -w "@{time_total}\n" -o /dev/null -s http://localhost/ # Page speed test $ sudo apt install lighthouse $ lighthouse http://localhost/ --output=json --output-path=./lighthouse-report

Exercise 5: Security Hardening

Implement security best practices for your web server:

Security Tasks

Security Implementation

  1. Hide Nginx version
  2. Disable unnecessary HTTP methods
  3. Implement rate limiting
  4. Add security headers
  5. Set up SSL/TLS
  6. Configure fail2ban
Click for security configurations
# Hide server tokens $ sudo nano /etc/nginx/nginx.conf # Add: server_tokens off; # Disable methods in site config $ sudo nano /etc/nginx/sites-available/project-site # Add to server block: if ($request_method !~ ^(GET|HEAD|POST)$) { return 405; } # Rate limiting $ sudo nano /etc/nginx/sites-available/project-site # Add to http block: limit_req_zone $binary_remote_addr zone=limit:10m rate=10r/s; limit_req zone=limit burst=20 nodelay; # Security headers $ sudo nano /etc/nginx/sites-available/project-site # Add to server block: add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; add_header X-Frame-Options "DENY" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; # Install and configure fail2ban $ sudo apt install fail2ban $ sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.local $ sudo nano /etc/fail2ban/jail.local # Add nginx protection: [nginx-http-auth] enabled = true filter = nginx-http-auth logpath = /var/log/nginx/error.log maxretry = 3 findtime = 600 $ sudo systemctl enable fail2ban $ sudo systemctl start fail2ban

Final Project Challenge

Complete this comprehensive challenge to test all your skills:

Challenge Requirements

Complete Web Project

  1. Deploy a professional portfolio website
  2. Include at least 5 different pages
  3. Add contact form with validation
  4. Implement responsive design
  5. Add JavaScript interactivity
  6. Set up automated backups
  7. Monitor website performance
  8. Document the entire setup
  9. Create deployment script
Click for project checklist
# Project structure $ mkdir -p ~/portfolio/{css,js,images,docs,scripts} # Create deployment script $ nano ~/portfolio/deploy.sh #!/bin/bash set -e echo "Deploying portfolio website..." # Backup current version cp -r ~/portfolio ~/backups/portfolio-$(date +%Y%m%d_%H%M%S) # Test and reload Nginx sudo nginx -t sudo systemctl reload nginx # Run performance test curl -w "@{time_total}\n" -o /dev/null -s http://localhost/ echo "Deployment completed successfully!" # Make executable $ chmod +x ~/portfolio/deploy.sh # Create documentation $ nano ~/portfolio/README.md # Portfolio Website Project ## Setup - Nginx web server - Ubuntu 24.04 LTS - Custom domain configuration ## Deployment ./deploy.sh ## Structure - css/: Stylesheets - js/: JavaScript files - images/: Images and media - docs/: Documentation ## Backup Strategy - Automated backups in ~/backups/ - Version control with Git

Evaluation Criteria

Success is measured by these criteria:

Technical Requirements

Code Quality

Linux Skills

Celebrating Your Success!

Congratulations on completing the Linux 101 course! You've mastered:

Next Steps: You're now ready for web development challenges! Consider exploring advanced topics like SSL certificates, database integration, and cloud deployment.

What's Next?

You've completed the Linux 101 course! Review the resources and continue your learning journey.

Review Course Resources

Key Takeaways

  • Successfully deployed a complete website
  • Mastered file management and permissions
  • Configured and managed Nginx web server
  • Implemented security best practices
  • Created automated backup systems
  • Developed troubleshooting skills
  • Ready for real web development work