Section 01: Understanding Basics
Before diving into code, let's understand the fundamental technologies that power the K12worX website. This section explains the "what" and "why" behind each tool we use.
What You'll Learn
- What Next.js is and why we use it
- What TypeScript is and how it helps catch errors
- What React is and how it builds user interfaces
- What Tailwind CSS is and why we use it for styling
Why This Matters
Understanding these technologies will help you:
- Read and understand the codebase
- Know which documentation to reference when stuck
- Make informed decisions when adding features
- Appreciate how modern web development works
The Big Picture
Here's how all these technologies fit together:
┌─────────────────────────────────────────┐
│ Next.js (Framework) │
│ - Handles routing, builds, server │
│ - Ties everything together │
│ │
│ ┌────────────────────────────────────┐│
│ │ React (UI Library) ││
│ │ - Builds user interfaces ││
│ │ - Components & JSX ││
│ │ ││
│ │ ┌──────────────────────────────┐ ││
│ │ │ TypeScript (Language) │ ││
│ │ │ - Type-safe JavaScript │ ││
│ │ │ - Catches errors early │ ││
│ │ └──────────────────────────────┘ ││
│ └────────────────────────────────────┘│
│ │
│ ┌────────────────────────────────────┐│
│ │ Tailwind CSS (Styling) ││
│ │ - Utility classes for styling ││
│ │ - No custom CSS files ││
│ └────────────────────────────────────┘│
└─────────────────────────────────────────┘
Estimated Time
2-3 hours (reading and exploring external resources)
Sections
Read these in order:
- HTML & CSS Refresher - Brush up on the fundamentals
- What is Next.js?
- What is TypeScript?
- What is React?
- What is Tailwind CSS?
Learning Approach
Don't Try to Memorize
You're not expected to remember everything. The goal is to:
- Get familiar with the concepts
- Know what each technology does
- Understand how they work together
It's Okay to Not Understand Everything
These are complex topics! Don't worry if some things don't click yet. They'll make more sense when you:
- See them in actual code
- Start using them yourself
- Read these sections again later
Use External Resources
Each section links to official documentation and tutorials. We've curated beginner-friendly resources and explained when to use each one.
Quick Definitions
Before diving in, here are one-sentence definitions:
| Technology | One-Line Description |
|---|---|
| Next.js | React framework that adds routing, optimization, and build tools |
| React | JavaScript library for building user interfaces with components |
| TypeScript | JavaScript with type checking to catch errors before running code |
| Tailwind CSS | CSS framework with pre-made utility classes for styling |
What You Don't Need to Learn (Yet)
To contribute to the K12worX website, you don't need to learn:
- ❌ Server-side rendering (our site is static)
- ❌ Database integration (we don't use one)
- ❌ Authentication systems (already built)
- ❌ Complex state management (we use simple patterns)
- ❌ Advanced TypeScript features (basic types are enough)
Focus on the basics first. Advanced topics come later if needed!
Next Steps
Ready to learn? Start with: