Week 1. Principles and Practices, Project Management

Step 1: Development Environment Setup

I started by setting up Visual Studio Code (VS Code) as my primary development environment. Here's what I installed and configured:

• Live Server: For real-time preview of my changes
• HTML CSS Support: For better code completion
• Prettier: To keep my code formatted nicely

💡 Pro Tip: Using Live Server saves a lot of time as you don't need to refresh your browser manually!

Step 2: File Structure Creation

I didn't want to change the file structure from the GitLab or provided template.

public/
├── index.html
├── about.html
├── final-project.html
├── weekly-assignments.html
├── assignments/
│   └── week01.html
├── style.css
└── images/
                    

🗂️ Understanding your file structure from the start makes it easier to organize content later!

Step 3: Template Selection & Download

After searching through various options, I downloaded the Virtual Folio template from Free-CSS.com. My reasons for choosing it:

• Clean, professional design that could be easily adapted
• Portfolio layout perfect for documenting Fab Academy projects
• Built with Bootstrap, making it responsive and modifiable

Step 4: Template Cleanup

I simplified the template by removing unnecessary components:

• Removed jQuery dependencies
• Eliminated unused CSS files
• Stripped out complex animations
• Simplified the navigation structure

Navigation Simplification

One of the first major changes was simplifying the navigation system:

CSS Modernization

/* Example of modernized CSS */
:root {
    --primary-color: #0077b5;
    --text-color: #333;
    --bg-color: #f5f7fa;
}

.assignments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
                    

Stripped Out Dependencies

// Old jQuery code
$('.navbar').on('click', function() {
    $(this).toggleClass('active');
});

// New vanilla JavaScript
document.querySelector('.navbar').addEventListener('click', function() {
    this.classList.toggle('active');
});
                    

💡 By removing these dependencies, the site loads faster and is easier to maintain!

Step 5: Progress Tracking Implementation

Added a status tracking system for assignments using badges:

<div class="status-wrapper">
  <span class="status-badge status-completed">
      <i class="fas fa-check-circle"></i>
      Completed
  </span>
</div>

The CSS for these badges:

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.875rem;
}

.status-completed {
  background: #e8f5e9;
  color: #2e7d32;
}
                    

🎯 Using status badges helps visitors quickly see my progress through the course.

Step 6: Interactive Features

Added useful interactive elements like the modal window for additional explanations:

This helps keep the main content clean while providing access to detailed information when needed.

Step 7: Attribution and Footer

Maintained proper credits and added contact information:

🤝 Always important to give credit where it's due!

Step 8: Setting Up Weekly Assignment Pages

For each weekly assignment, I created a template in assignments/week01.html. The key was maintaining a consistent structure:

• Copy the navigation from index.html.
• Add a sidebar for easy navigation between weeks.
• Create sections for:
  • Learning objectives
  • Process documentation