upskill-spa-basic

Upgrading Internal Skills for Single Page Application (SPA) Web Development

Overview

This repository provides hands-on learning materials for developing Single Page Applications (SPAs) using vanilla JavaScript and web standards. The curriculum is structured as a progressive learning path, with each branch building upon previous concepts.

Learning Path

This course follows a step-by-step approach to SPA development:

Branch Structure

• main - Repository overview and setup instructions (you are here)
• 01-spa-starter - Basic project setup and introduction to SPA concepts
• 02-spa-dom - DOM manipulation and dynamic content creation
• 03-spa-custom-element - Building reusable custom web components
• 04-stateful-stateless - Understanding component state management
• 05-challenge-checkout - Final project - Build a complete checkout flow

Getting Started

Prerequisites

Before starting this course, you should have:

• Basic knowledge of HTML, CSS, and JavaScript
• A modern web browser (Chrome, Firefox, Safari, or Edge)
• A code editor (VS Code, Sublime Text, or similar)
• Git installed on your system

How to Use This Repository

1. Clone the repository:

   git clone <repository-url>
   cd upskill-spa-basic

2. Start with the first lesson:

   git checkout 01-spa-starter

3. Work through each branch sequentially:

   • Complete the exercises in the current branch
   • Read the branch-specific README for detailed instructions
   • Move to the next branch when ready: git checkout 02-spa-dom

4. Follow the progressive structure: Each branch builds upon the previous one, so it's important to follow the numbered sequence.

What You'll Learn

• SPA Fundamentals: Understanding single-page application architecture
• DOM Manipulation: Creating dynamic, interactive web content
• Custom Elements: Building reusable web components
• State Management: Handling application state in SPAs
• Project Integration: Combining concepts in a real-world scenario

Course Structure

This is a hands-on, project-based learning experience. Each branch contains:

• Working code examples
• Step-by-step exercises
• README with specific learning objectives
• Progressive challenges that build real SPA skills

Need Help?

• Check the README in each branch for specific instructions
• Review the code examples provided in each lesson
• Practice the concepts by modifying and experimenting with the code