Advanced Unreal Engine Development Course
cgen-a332da8cc88b4551933eae467aae644b
This commit is contained in:
Builder.io
parent
8fa85829d0
commit
435bdced60
9 changed files with 4048 additions and 0 deletions
451
public/courses/advanced-unreal-engine.md
Normal file
451
public/courses/advanced-unreal-engine.md
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
# Advanced Unreal Engine Development
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to Advanced UE5](#introduction)
|
||||
2. [C++ Integration & Engine Customization](#cpp-integration)
|
||||
3. [Performance Optimization Techniques](#performance-optimization)
|
||||
4. [Networking & Multiplayer Systems](#networking)
|
||||
5. [Advanced Rendering & Graphics](#rendering)
|
||||
6. [Project Optimization & Profiling](#profiling)
|
||||
7. [Real-World Case Studies](#case-studies)
|
||||
8. [Best Practices & Conclusion](#best-practices)
|
||||
|
||||
## Introduction to Advanced UE5
|
||||
|
||||
Unreal Engine 5 (UE5) represents the pinnacle of real-time game development technology. This course goes beyond basic game creation to explore the advanced systems, optimization techniques, and architectural patterns used in AAA game development.
|
||||
|
||||
### What You'll Learn
|
||||
|
||||
- Deep C++ integration with UE5
|
||||
- Advanced rendering pipeline manipulation
|
||||
- Network architecture and multiplayer systems
|
||||
- Performance profiling and optimization
|
||||
- Large-scale project management
|
||||
- Shipping optimization and runtime management
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Solid understanding of Unreal Engine fundamentals
|
||||
- Intermediate C++ programming knowledge
|
||||
- Experience with game development concepts
|
||||
- Familiarity with UE5 editor tools and workflows
|
||||
|
||||
### Course Structure
|
||||
|
||||
This advanced course is divided into 8 comprehensive chapters covering everything from engine internals to shipping-ready optimization techniques. Each chapter includes practical examples, code samples, and performance benchmarks.
|
||||
|
||||
## C++ Integration & Engine Customization
|
||||
|
||||
### Engine Architecture Overview
|
||||
|
||||
Understanding UE5's architecture is essential for advanced development. The engine is built on several core systems:
|
||||
|
||||
- **Core Module**: Provides fundamental data structures, containers, and math
|
||||
- **Engine Module**: Contains all gameplay systems, actors, and components
|
||||
- **Renderer Module**: Manages graphics, shaders, and rendering pipeline
|
||||
- **Networking Module**: Handles replication, RPC, and multiplayer systems
|
||||
- **Online Services Module**: Integrates with online platforms and services
|
||||
|
||||
### Native Code Implementation
|
||||
|
||||
Creating native C++ code in UE5 requires understanding proper module organization and plugin architecture.
|
||||
|
||||
```cpp
|
||||
#pragma once
|
||||
|
||||
#include "CoreMinimal.h"
|
||||
#include "GameFramework/Character.h"
|
||||
#include "InputActionValue.h"
|
||||
#include "AdvancedCharacter.generated.h"
|
||||
|
||||
DECLARE_MULTICAST_DELEGATE_TwoParams(FOnCharacterHealthChanged, AActor*, float);
|
||||
|
||||
UCLASS()
|
||||
class MYPROJECT_API AAdvancedCharacter : public ACharacter
|
||||
{
|
||||
GENERATED_BODY()
|
||||
|
||||
public:
|
||||
AAdvancedCharacter();
|
||||
|
||||
virtual void BeginPlay() override;
|
||||
virtual void Tick(float DeltaTime) override;
|
||||
|
||||
protected:
|
||||
UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Combat")
|
||||
float MaxHealth;
|
||||
|
||||
UPROPERTY(Replicated, VisibleAnywhere, BlueprintReadOnly, Category = "Combat")
|
||||
float CurrentHealth;
|
||||
|
||||
UFUNCTION(Server, Reliable, WithValidation)
|
||||
void ServerTakeDamage(float DamageAmount, AActor* Instigator);
|
||||
|
||||
FOnCharacterHealthChanged OnHealthChanged;
|
||||
|
||||
public:
|
||||
float GetHealthPercent() const { return CurrentHealth / MaxHealth; }
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Data Types & Structures
|
||||
|
||||
Advanced projects often require custom data structures for specific gameplay needs:
|
||||
|
||||
```cpp
|
||||
USTRUCT(BlueprintType)
|
||||
struct FCharacterStatistics
|
||||
{
|
||||
GENERATED_BODY()
|
||||
|
||||
UPROPERTY(EditAnywhere, BlueprintReadWrite)
|
||||
float Experience;
|
||||
|
||||
UPROPERTY(EditAnywhere, BlueprintReadWrite)
|
||||
int32 Level;
|
||||
|
||||
UPROPERTY(EditAnywhere, BlueprintReadWrite)
|
||||
TMap<FString, float> SkillProficiency;
|
||||
|
||||
UPROPERTY(EditAnywhere, BlueprintReadWrite)
|
||||
TArray<class AItem*> Inventory;
|
||||
};
|
||||
```
|
||||
|
||||
### Plugin Development
|
||||
|
||||
Creating plugins allows code reuse across multiple projects:
|
||||
|
||||
```cpp
|
||||
#pragma once
|
||||
|
||||
#include "Modules/ModuleManager.h"
|
||||
|
||||
class FAdvancedSystemsModule : public IModuleInterface
|
||||
{
|
||||
public:
|
||||
virtual void StartupModule() override;
|
||||
virtual void ShutdownModule() override;
|
||||
|
||||
// Register custom console commands
|
||||
void RegisterConsoleCommands();
|
||||
};
|
||||
```
|
||||
|
||||
## Performance Optimization Techniques
|
||||
|
||||
### Profiling Tools & Metrics
|
||||
|
||||
Understanding performance bottlenecks requires proper profiling:
|
||||
|
||||
- **Unreal Insights**: Real-time profiling and visualization
|
||||
- **Stat Console**: In-game performance metrics
|
||||
- **GPU Profiler**: Graphics pipeline analysis
|
||||
- **Memory Profilers**: Memory allocation tracking
|
||||
|
||||
### CPU Optimization
|
||||
|
||||
Optimizing CPU usage involves several strategies:
|
||||
|
||||
```cpp
|
||||
// Efficient actor iteration with spatial queries
|
||||
void AGameManager::FindActorsNearLocation(FVector Location, float Radius)
|
||||
{
|
||||
// Use spatial queries instead of iterating all actors
|
||||
FVector QueryLocation = Location;
|
||||
|
||||
TArray<FHitResult> HitResults;
|
||||
FCollisionShape QueryShape = FCollisionShape::MakeSphere(Radius);
|
||||
|
||||
GetWorld()->SweepMultiByChannel(
|
||||
HitResults,
|
||||
QueryLocation,
|
||||
QueryLocation,
|
||||
FQuat::Identity,
|
||||
ECC_Pawn,
|
||||
QueryShape
|
||||
);
|
||||
|
||||
for (const FHitResult& Hit : HitResults)
|
||||
{
|
||||
if (APawn* Pawn = Cast<APawn>(Hit.GetActor()))
|
||||
{
|
||||
// Process pawn
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Memory Management
|
||||
|
||||
Efficient memory usage is crucial for complex games:
|
||||
|
||||
```cpp
|
||||
// Use object pooling for frequently created actors
|
||||
class AProjectilePool : public AActor
|
||||
{
|
||||
UPROPERTY()
|
||||
TArray<class AProjectile*> AvailableProjectiles;
|
||||
|
||||
UPROPERTY()
|
||||
TArray<class AProjectile*> ActiveProjectiles;
|
||||
|
||||
AProjectile* GetProjectile()
|
||||
{
|
||||
if (AvailableProjectiles.Num() > 0)
|
||||
{
|
||||
return AvailableProjectiles.Pop();
|
||||
}
|
||||
return GetWorld()->SpawnActor<AProjectile>();
|
||||
}
|
||||
|
||||
void ReturnProjectile(AProjectile* Projectile)
|
||||
{
|
||||
AvailableProjectiles.Add(Projectile);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Asset Optimization
|
||||
|
||||
Managing large asset libraries:
|
||||
|
||||
- **LOD (Level of Detail)**: Reduce polygon count for distant objects
|
||||
- **Nanite Virtualized Geometry**: Automatically manage geometry detail
|
||||
- **Texture Streaming**: Load textures based on camera proximity
|
||||
- **Asset Compression**: Balance quality with storage requirements
|
||||
|
||||
## Networking & Multiplayer Systems
|
||||
|
||||
### Replication Architecture
|
||||
|
||||
Understanding UE5's network replication system:
|
||||
|
||||
```cpp
|
||||
UCLASS()
|
||||
class MYPROJECT_API ANetworkedCharacter : public ACharacter
|
||||
{
|
||||
GENERATED_BODY()
|
||||
|
||||
public:
|
||||
virtual void GetLifetimeReplicatedProps(TArray<FLifetimeProperty>& OutLifetimeProps) const override;
|
||||
|
||||
protected:
|
||||
UPROPERTY(Replicated, BlueprintReadOnly)
|
||||
float NetworkedHealth;
|
||||
|
||||
UPROPERTY(ReplicatedUsing = OnWeaponChanged)
|
||||
class AWeapon* CurrentWeapon;
|
||||
|
||||
UFUNCTION()
|
||||
void OnWeaponChanged();
|
||||
};
|
||||
|
||||
void ANetworkedCharacter::GetLifetimeReplicatedProps(TArray<FLifetimeProperty>& OutLifetimeProps) const
|
||||
{
|
||||
Super::GetLifetimeReplicatedProps(OutLifetimeProps);
|
||||
|
||||
DOREPLIFETIME(ANetworkedCharacter, NetworkedHealth);
|
||||
DOREPLIFETIME_CONDITION(ANetworkedCharacter, CurrentWeapon, COND_OwnerOnly);
|
||||
}
|
||||
```
|
||||
|
||||
### RPC Implementation
|
||||
|
||||
Remote Procedure Calls for network communication:
|
||||
|
||||
```cpp
|
||||
UCLASS()
|
||||
class MYPROJECT_API AGameplayActor : public AActor
|
||||
{
|
||||
GENERATED_BODY()
|
||||
|
||||
protected:
|
||||
UFUNCTION(Server, Reliable, WithValidation)
|
||||
void ServerFireWeapon(FVector Location, FVector Direction);
|
||||
|
||||
UFUNCTION(Client, Unreliable)
|
||||
void ClientPlayFireEffect(FVector Location);
|
||||
|
||||
UFUNCTION(NetMulticast, Unreliable)
|
||||
void MulticastPlayFireSound(FVector Location);
|
||||
};
|
||||
|
||||
void AGameplayActor::ServerFireWeapon_Implementation(FVector Location, FVector Direction)
|
||||
{
|
||||
// Server validates and processes the request
|
||||
if (ValidateFireRequest(Location, Direction))
|
||||
{
|
||||
// Perform damage calculations
|
||||
MulticastPlayFireSound(Location);
|
||||
}
|
||||
}
|
||||
|
||||
bool AGameplayActor::ServerFireWeapon_Validate(FVector Location, FVector Direction)
|
||||
{
|
||||
// Validate inputs to prevent cheating
|
||||
return Location.Length() < 10000.0f && Direction.IsNormalized();
|
||||
}
|
||||
```
|
||||
|
||||
### Bandwidth Optimization
|
||||
|
||||
Reducing network traffic is critical for multiplayer performance:
|
||||
|
||||
```cpp
|
||||
// Prioritize replication based on relevance
|
||||
bool ANetworkedCharacter::IsNetRelevantFor(
|
||||
const AActor* RealViewer,
|
||||
const AActor* ViewTarget,
|
||||
const FVector& SrcLocation) const
|
||||
{
|
||||
// Reduce update frequency for distant actors
|
||||
if (FVector::Dist(GetActorLocation(), SrcLocation) > 5000.0f)
|
||||
{
|
||||
return GetWorld()->GetTimeSeconds() - LastUpdateTime > 0.5f;
|
||||
}
|
||||
|
||||
return Super::IsNetRelevantFor(RealViewer, ViewTarget, SrcLocation);
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced Rendering & Graphics
|
||||
|
||||
### Custom Rendering Pipeline
|
||||
|
||||
Extending UE5's rendering pipeline:
|
||||
|
||||
```cpp
|
||||
// Custom post-process material setup
|
||||
void AAdvancedViewTarget::SetupCustomPostProcessing()
|
||||
{
|
||||
UMaterialInstanceDynamic* PostProcessMaterial =
|
||||
UMaterialInstanceDynamic::Create(BaseMaterial, this);
|
||||
|
||||
PostProcessMaterial->SetScalarParameterValue(FName("Intensity"), 1.5f);
|
||||
PostProcessMaterial->SetVectorParameterValue(
|
||||
FName("TintColor"),
|
||||
FLinearColor(1.0f, 0.8f, 0.6f, 1.0f)
|
||||
);
|
||||
|
||||
APlayerCameraManager* CameraManager = GetWorld()->GetFirstPlayerController()->PlayerCameraManager;
|
||||
CameraManager->AddOrUpdateBlendable(PostProcessMaterial, 1.0f);
|
||||
}
|
||||
```
|
||||
|
||||
### Shader Development
|
||||
|
||||
Writing custom shaders for specific effects:
|
||||
|
||||
```hlsl
|
||||
// Simple outline shader
|
||||
void MainPS(
|
||||
float4 SvPosition : SV_POSITION,
|
||||
float4 Color : TEXCOORD0,
|
||||
out float4 OutColor : SV_Target0)
|
||||
{
|
||||
float2 UV = SvPosition.xy / ViewSizeAndInvSize.xy;
|
||||
|
||||
// Sample normal maps to detect edges
|
||||
float3 Normal = Texture2DSample(NormalTexture, NormalSampler, UV).xyz;
|
||||
float Depth = Texture2DSample(DepthTexture, DepthSampler, UV).r;
|
||||
|
||||
// Calculate edge detection
|
||||
float EdgeDetection = length(
|
||||
float2(ddx(Depth), ddy(Depth))
|
||||
);
|
||||
|
||||
OutColor = EdgeDetection > 0.1 ? OutlineColor : float4(0,0,0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## Project Optimization & Profiling
|
||||
|
||||
### Large-Scale Project Structure
|
||||
|
||||
Organizing complex projects:
|
||||
|
||||
```
|
||||
MyProject/
|
||||
├── Source/
|
||||
│ ├── MyProject/
|
||||
│ │ ├── Public/
|
||||
│ │ │ ├── Character/
|
||||
│ │ │ ├── Gameplay/
|
||||
│ │ │ └── UI/
|
||||
│ │ └── Private/
|
||||
│ └── MyProject.Build.cs
|
||||
├── Content/
|
||||
│ ├── Characters/
|
||||
│ ├── Levels/
|
||||
│ └── VFX/
|
||||
└── Plugins/
|
||||
└── CustomSystems/
|
||||
```
|
||||
|
||||
### Build Configuration
|
||||
|
||||
Optimized build settings:
|
||||
|
||||
```
|
||||
[Core.System]
|
||||
AsyncLoadingThreadEnabled=True
|
||||
MaxAsyncIOBandwidth=104857600
|
||||
|
||||
[/Script/Engine.GarbageCollectionSettings]
|
||||
TimeBetweenPurgingPendingKillObjects=30
|
||||
|
||||
[/Script/Engine.Engine]
|
||||
MaxClientRate=100
|
||||
MaxServerTickRate=120
|
||||
```
|
||||
|
||||
## Real-World Case Studies
|
||||
|
||||
### AAA Multiplayer Game Architecture
|
||||
|
||||
Lessons from shipping large multiplayer titles:
|
||||
|
||||
- **Server Architecture**: Distributed servers with matchmaking
|
||||
- **Player Progression**: Persistent data storage and cloud saves
|
||||
- **Anti-Cheat**: Validation and client-side prediction
|
||||
- **Live Operations**: Content updates and seasonal systems
|
||||
|
||||
### Performance Targets
|
||||
|
||||
Industry standards for different platforms:
|
||||
|
||||
- **PC**: 60-120 FPS at 1440p or 4K
|
||||
- **Console**: 30-60 FPS at 1080p-4K
|
||||
- **Mobile**: 30-60 FPS at 1080p
|
||||
- **VR**: 90+ FPS for comfort
|
||||
|
||||
## Best Practices & Conclusion
|
||||
|
||||
### Development Workflow
|
||||
|
||||
1. Profile early and often
|
||||
2. Use version control for all assets
|
||||
3. Implement automated testing
|
||||
4. Regular code reviews
|
||||
5. Documentation alongside development
|
||||
|
||||
### Shipping Checklist
|
||||
|
||||
- [ ] All performance targets met
|
||||
- [ ] Network replication validated
|
||||
- [ ] Memory usage optimized
|
||||
- [ ] All platforms tested
|
||||
- [ ] Security audit completed
|
||||
- [ ] Localization implemented
|
||||
- [ ] Analytics integrated
|
||||
|
||||
### Continuing Your Education
|
||||
|
||||
- Study Epic Games' sample projects
|
||||
- Participate in the UE5 community
|
||||
- Attend GDC talks and conferences
|
||||
- Contribute to open-source UE5 projects
|
||||
|
||||
This advanced course provides the foundation for professional AAA game development with Unreal Engine 5. Master these concepts and you'll be well-equipped to build ambitious, high-performance games.
|
||||
523
public/courses/backend-architecture.md
Normal file
523
public/courses/backend-architecture.md
Normal file
|
|
@ -0,0 +1,523 @@
|
|||
# Backend Architecture & Systems Design
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to Systems Design](#introduction)
|
||||
2. [Architectural Patterns](#patterns)
|
||||
3. [Database Design](#databases)
|
||||
4. [API Design](#apis)
|
||||
5. [Caching Strategies](#caching)
|
||||
6. [Microservices Architecture](#microservices)
|
||||
7. [Scalability & Performance](#scalability)
|
||||
8. [Deployment & DevOps](#deployment)
|
||||
|
||||
## Introduction to Systems Design
|
||||
|
||||
Systems design is about building large-scale systems that are scalable, reliable, and maintainable. This course covers the architecture decisions that shape successful backend systems.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
**Scalability**: Can the system handle growth?
|
||||
**Availability**: How reliable is the system?
|
||||
**Consistency**: Is data accurate across all nodes?
|
||||
**Partition Tolerance**: Works despite network failures?
|
||||
**Latency**: How fast are responses?
|
||||
**Throughput**: How many requests per second?
|
||||
|
||||
### Design Process
|
||||
|
||||
```
|
||||
1. Understand Requirements
|
||||
- Functional (what it does)
|
||||
- Non-functional (performance, scale)
|
||||
|
||||
2. Estimate Scale
|
||||
- Users, data volume, traffic
|
||||
|
||||
3. Design High-Level Architecture
|
||||
- Components and their interactions
|
||||
|
||||
4. Identify Bottlenecks
|
||||
- Where will failures occur?
|
||||
|
||||
5. Optimize
|
||||
- Caching, databases, APIs
|
||||
```
|
||||
|
||||
## Architectural Patterns
|
||||
|
||||
### Monolithic Architecture
|
||||
|
||||
Single unified application:
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ Web Server │
|
||||
├─────────────────────────┤
|
||||
│ User Service │
|
||||
│ Product Service │
|
||||
│ Order Service │
|
||||
│ Payment Service │
|
||||
├─────────────────────────┤
|
||||
│ Database │
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
**Advantages:**
|
||||
- Simple to develop initially
|
||||
- Easy to deploy as single unit
|
||||
- Better performance (in-process calls)
|
||||
|
||||
**Disadvantages:**
|
||||
- Scaling limited to vertical scaling
|
||||
- Technology changes hard to implement
|
||||
- Tight coupling
|
||||
|
||||
### Microservices Architecture
|
||||
|
||||
Decomposed into independent services:
|
||||
|
||||
```
|
||||
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
|
||||
│ User Service │ │ Order Service│ │Payment Svc │
|
||||
├──────────────┤ ├──────────────┤ ├──────────────┤
|
||||
│ User DB │ │ Order DB │ │ Payment DB │
|
||||
└──────────────┘ └──────────────┘ └──────────────┘
|
||||
↓ ↓ ↓
|
||||
└────── API Gateway ─────────┘
|
||||
```
|
||||
|
||||
**Advantages:**
|
||||
- Scale services independently
|
||||
- Use different technologies per service
|
||||
- Loose coupling
|
||||
- Deploy independently
|
||||
|
||||
**Disadvantages:**
|
||||
- Operational complexity
|
||||
- Network latency
|
||||
- Data consistency challenges
|
||||
- Testing complexity
|
||||
|
||||
### Event-Driven Architecture
|
||||
|
||||
Services communicate via events:
|
||||
|
||||
```
|
||||
User Service Order Service Payment Service
|
||||
│ │ │
|
||||
│ User Created │ │
|
||||
└──────────────────→ Message Queue ←───────────│
|
||||
│ Payment Processed
|
||||
│
|
||||
Event Processor
|
||||
│
|
||||
Stores event in log
|
||||
```
|
||||
|
||||
## Database Design
|
||||
|
||||
### Relational Databases
|
||||
|
||||
Structured data with relationships:
|
||||
|
||||
```sql
|
||||
-- Users table
|
||||
CREATE TABLE users (
|
||||
id SERIAL PRIMARY KEY,
|
||||
name VARCHAR(255) NOT NULL,
|
||||
email VARCHAR(255) UNIQUE,
|
||||
created_at TIMESTAMP
|
||||
);
|
||||
|
||||
-- Orders table
|
||||
CREATE TABLE orders (
|
||||
id SERIAL PRIMARY KEY,
|
||||
user_id INTEGER REFERENCES users(id),
|
||||
total_amount DECIMAL(10, 2),
|
||||
created_at TIMESTAMP
|
||||
);
|
||||
|
||||
-- Indexes for performance
|
||||
CREATE INDEX idx_users_email ON users(email);
|
||||
CREATE INDEX idx_orders_user_id ON orders(user_id);
|
||||
```
|
||||
|
||||
**Use Cases:**
|
||||
- Complex relationships
|
||||
- ACID transactions required
|
||||
- Structured data
|
||||
- Strong consistency
|
||||
|
||||
**Examples:** PostgreSQL, MySQL, Oracle
|
||||
|
||||
### NoSQL Databases
|
||||
|
||||
Flexible, distributed data stores:
|
||||
|
||||
```json
|
||||
// Document DB (MongoDB)
|
||||
{
|
||||
"_id": ObjectId("..."),
|
||||
"user_id": "user123",
|
||||
"items": [
|
||||
{"product_id": "prod1", "quantity": 2},
|
||||
{"product_id": "prod2", "quantity": 1}
|
||||
],
|
||||
"total": 99.99
|
||||
}
|
||||
```
|
||||
|
||||
**Use Cases:**
|
||||
- Unstructured data
|
||||
- Horizontal scaling
|
||||
- Flexible schema
|
||||
- High throughput
|
||||
|
||||
**Examples:** MongoDB, DynamoDB, Cassandra
|
||||
|
||||
### Database Optimization
|
||||
|
||||
**Normalization** (Relational):
|
||||
- Reduce redundancy
|
||||
- Improve consistency
|
||||
- Trade-off: More joins needed
|
||||
|
||||
**Denormalization** (NoSQL):
|
||||
- Reduce queries
|
||||
- Improve performance
|
||||
- Trade-off: Data duplication
|
||||
|
||||
## API Design
|
||||
|
||||
### RESTful API Design
|
||||
|
||||
Resource-oriented architecture:
|
||||
|
||||
```
|
||||
GET /api/users # List all users
|
||||
GET /api/users/:id # Get specific user
|
||||
POST /api/users # Create user
|
||||
PUT /api/users/:id # Update user
|
||||
DELETE /api/users/:id # Delete user
|
||||
|
||||
GET /api/users/:id/orders # Get user's orders
|
||||
POST /api/users/:id/orders # Create order for user
|
||||
```
|
||||
|
||||
### Versioning Strategy
|
||||
|
||||
Managing API changes:
|
||||
|
||||
```
|
||||
// URL versioning
|
||||
GET /api/v1/users
|
||||
GET /api/v2/users (breaking change)
|
||||
|
||||
// Header versioning
|
||||
GET /api/users
|
||||
Header: Api-Version: 2
|
||||
|
||||
// Parameter versioning
|
||||
GET /api/users?version=2
|
||||
```
|
||||
|
||||
### Response Format
|
||||
|
||||
Consistent JSON structure:
|
||||
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": "user123",
|
||||
"name": "Alice",
|
||||
"email": "alice@example.com"
|
||||
},
|
||||
"meta": {
|
||||
"timestamp": "2024-01-15T10:30:00Z"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Caching Strategies
|
||||
|
||||
### Cache Types
|
||||
|
||||
**Browser Caching**
|
||||
- Cache headers in HTTP response
|
||||
- Reduces server load
|
||||
|
||||
**CDN Caching**
|
||||
- Distribute content globally
|
||||
- Low latency from user location
|
||||
|
||||
**Application Caching**
|
||||
- In-memory data store (Redis)
|
||||
- Fast data access
|
||||
|
||||
**Database Caching**
|
||||
- Query result caching
|
||||
- Reduce database load
|
||||
|
||||
### Cache Invalidation
|
||||
|
||||
Strategies for keeping cache fresh:
|
||||
|
||||
**Time-based (TTL)**
|
||||
```
|
||||
Cache entry expires after 1 hour
|
||||
Simple, but may serve stale data
|
||||
```
|
||||
|
||||
**Event-based**
|
||||
```
|
||||
When user updates profile, invalidate cache
|
||||
More accurate, but complex implementation
|
||||
```
|
||||
|
||||
**Write-through**
|
||||
```
|
||||
Always write to cache and database together
|
||||
Ensures consistency, higher latency on writes
|
||||
```
|
||||
|
||||
### Redis Implementation
|
||||
|
||||
```python
|
||||
import redis
|
||||
import json
|
||||
|
||||
redis_client = redis.Redis(host='localhost', port=6379)
|
||||
|
||||
# Store in cache
|
||||
def get_user(user_id):
|
||||
# Check cache first
|
||||
cache_key = f"user:{user_id}"
|
||||
cached = redis_client.get(cache_key)
|
||||
|
||||
if cached:
|
||||
return json.loads(cached)
|
||||
|
||||
# Fetch from database
|
||||
user = db.query(User).filter(User.id == user_id).first()
|
||||
|
||||
if user:
|
||||
# Store in cache for 1 hour
|
||||
redis_client.setex(cache_key, 3600, json.dumps(user.to_dict()))
|
||||
|
||||
return user
|
||||
|
||||
# Invalidate cache
|
||||
def update_user(user_id, data):
|
||||
user = db.query(User).filter(User.id == user_id).first()
|
||||
user.update(data)
|
||||
db.commit()
|
||||
|
||||
# Invalidate cache
|
||||
redis_client.delete(f"user:{user_id}")
|
||||
```
|
||||
|
||||
## Microservices Architecture
|
||||
|
||||
### Service Communication
|
||||
|
||||
**Synchronous (REST/gRPC)**
|
||||
- Direct request-response
|
||||
- Simple but tight coupling
|
||||
- Latency addition
|
||||
|
||||
**Asynchronous (Message Queue)**
|
||||
- Fire and forget
|
||||
- Loose coupling
|
||||
- Delayed processing
|
||||
|
||||
### Service Mesh
|
||||
|
||||
Managing service-to-service communication:
|
||||
|
||||
```
|
||||
┌─────────────┐
|
||||
│ User Svc │
|
||||
└─────────────┘
|
||||
│
|
||||
↓ (managed by Istio/Linkerd)
|
||||
┌─────────────┐ ┌──────────────┐
|
||||
│ Proxy │───→│ Order Svc │
|
||||
│ (Envoy) │ │ │
|
||||
└─────────────┘ └──────────────┘
|
||||
Features:
|
||||
- Load balancing
|
||||
- Circuit breaking
|
||||
- Retries
|
||||
- Monitoring
|
||||
```
|
||||
|
||||
### Saga Pattern (Distributed Transactions)
|
||||
|
||||
Handling transactions across services:
|
||||
|
||||
```
|
||||
User Service Order Service Payment Service
|
||||
│ │ │
|
||||
│ Create Order │ │
|
||||
│───────────────────→│ │
|
||||
│ │ Process Payment │
|
||||
│ │────────────────────→│
|
||||
│ │ Payment Confirmed │
|
||||
│ │←────────────────────│
|
||||
│ Order Confirmed │ │
|
||||
│←───────────────────│ │
|
||||
|
||||
If payment fails, compensating transactions
|
||||
cancel order and refund user
|
||||
```
|
||||
|
||||
## Scalability & Performance
|
||||
|
||||
### Horizontal Scaling
|
||||
|
||||
Adding more servers:
|
||||
|
||||
```
|
||||
Load Balancer
|
||||
│
|
||||
┌───┬───┬───┐
|
||||
↓ ↓ ↓ ↓
|
||||
Svc Svc Svc Svc
|
||||
│ │ │ │
|
||||
└───┴───┴───┘
|
||||
Shared DB
|
||||
```
|
||||
|
||||
**Load Balancing Strategies:**
|
||||
- Round-robin: Equal distribution
|
||||
- Least connections: Send to least busy
|
||||
- IP hash: Same user always to same server
|
||||
|
||||
### Database Scaling
|
||||
|
||||
**Read Replicas**
|
||||
```
|
||||
Master DB (Writes)
|
||||
│
|
||||
┌───┬───┬───┐
|
||||
↓ ↓ ↓ ↓
|
||||
Replica Replicas (Reads)
|
||||
```
|
||||
|
||||
**Sharding (Horizontal Partitioning)**
|
||||
```
|
||||
User 1-500K → Shard 1 (DB 1)
|
||||
User 500K-1M → Shard 2 (DB 2)
|
||||
User 1M-1.5M → Shard 3 (DB 3)
|
||||
|
||||
Tradeoff: Data is partitioned but more complex querying
|
||||
```
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
```
|
||||
1. Identify bottlenecks (profiling, monitoring)
|
||||
2. Optimize database queries (indexes, query analysis)
|
||||
3. Implement caching (Redis, CDN)
|
||||
4. Use async processing (message queues)
|
||||
5. Optimize code (algorithms, data structures)
|
||||
6. Scale infrastructure (add servers, CDN)
|
||||
```
|
||||
|
||||
## Deployment & DevOps
|
||||
|
||||
### Container Technology (Docker)
|
||||
|
||||
```dockerfile
|
||||
FROM node:18-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["node", "index.js"]
|
||||
```
|
||||
|
||||
### Orchestration (Kubernetes)
|
||||
|
||||
Managing containerized applications:
|
||||
|
||||
```yaml
|
||||
apiVersion: v1
|
||||
kind: Service
|
||||
metadata:
|
||||
name: api-service
|
||||
spec:
|
||||
selector:
|
||||
app: api
|
||||
ports:
|
||||
- protocol: TCP
|
||||
port: 80
|
||||
targetPort: 3000
|
||||
---
|
||||
apiVersion: apps/v1
|
||||
kind: Deployment
|
||||
metadata:
|
||||
name: api
|
||||
spec:
|
||||
replicas: 3
|
||||
selector:
|
||||
matchLabels:
|
||||
app: api
|
||||
template:
|
||||
metadata:
|
||||
labels:
|
||||
app: api
|
||||
spec:
|
||||
containers:
|
||||
- name: api
|
||||
image: myapp:latest
|
||||
ports:
|
||||
- containerPort: 3000
|
||||
env:
|
||||
- name: DATABASE_URL
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: db-secret
|
||||
key: url
|
||||
```
|
||||
|
||||
### CI/CD Pipeline
|
||||
|
||||
Automated testing and deployment:
|
||||
|
||||
```
|
||||
Code Commit
|
||||
↓
|
||||
Run Tests (Unit, Integration)
|
||||
↓
|
||||
Build Docker Image
|
||||
↓
|
||||
Push to Registry
|
||||
↓
|
||||
Deploy to Staging
|
||||
↓
|
||||
Run E2E Tests
|
||||
↓
|
||||
Deploy to Production
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
Mastering backend systems design requires understanding:
|
||||
|
||||
- **Architecture patterns**: When to use monoliths vs microservices
|
||||
- **Database design**: Choosing the right data store
|
||||
- **API design**: Clear, versioned interfaces
|
||||
- **Caching**: Reducing latency and load
|
||||
- **Scalability**: Planning for growth
|
||||
- **Operations**: Reliable deployment and monitoring
|
||||
|
||||
Study these principles, practice on real systems, and stay updated with evolving technologies. Great backend architecture enables great products.
|
||||
392
public/courses/design-systems.md
Normal file
392
public/courses/design-systems.md
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
# Building Design Systems at Scale
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to Design Systems](#introduction)
|
||||
2. [Design System Foundations](#foundations)
|
||||
3. [Component Architecture](#components)
|
||||
4. [Design Tokens](#tokens)
|
||||
5. [Documentation & Governance](#documentation)
|
||||
6. [Implementation & Adoption](#implementation)
|
||||
7. [Tools & Workflows](#tools)
|
||||
8. [Scaling & Maintenance](#scaling)
|
||||
|
||||
## Introduction to Design Systems
|
||||
|
||||
A design system is a comprehensive set of standards and components that allows teams to build products consistently and efficiently. It bridges the gap between design and development.
|
||||
|
||||
### Why Design Systems Matter
|
||||
|
||||
- **Consistency**: Unified user experience across products
|
||||
- **Efficiency**: Faster design and development
|
||||
- **Scalability**: Support for growth without chaos
|
||||
- **Quality**: Built-in best practices and accessibility
|
||||
- **Communication**: Shared language between teams
|
||||
|
||||
### Real-World Examples
|
||||
|
||||
- **Material Design** (Google): Comprehensive design language
|
||||
- **Fluent Design** (Microsoft): Modern, open design system
|
||||
- **Carbon Design System** (IBM): Enterprise-focused design system
|
||||
- **Ant Design**: Popular React component library
|
||||
|
||||
### Design System Layers
|
||||
|
||||
```
|
||||
Application Products
|
||||
↓
|
||||
Component Library
|
||||
↓
|
||||
Design Tokens
|
||||
↓
|
||||
Brand Guidelines
|
||||
```
|
||||
|
||||
## Design System Foundations
|
||||
|
||||
### Brand Guidelines
|
||||
|
||||
Core brand elements:
|
||||
|
||||
**Logo Usage**
|
||||
- Minimum size requirements
|
||||
- Clear space around logo
|
||||
- Do's and don'ts
|
||||
- Variations (horizontal, vertical, monochrome)
|
||||
|
||||
**Color Palette**
|
||||
- Primary brand colors
|
||||
- Secondary colors
|
||||
- Neutral palette
|
||||
- Color meanings and usage
|
||||
|
||||
**Typography**
|
||||
- Primary and secondary typefaces
|
||||
- Size scales
|
||||
- Weight usage
|
||||
- Line height guidelines
|
||||
|
||||
**Imagery**
|
||||
- Photography style
|
||||
- Illustration style
|
||||
- Icon guidelines
|
||||
- Video standards
|
||||
|
||||
### Design Principles
|
||||
|
||||
Core values guiding design decisions:
|
||||
|
||||
1. **Clarity**: Easy to understand and use
|
||||
2. **Consistency**: Predictable patterns
|
||||
3. **Accessibility**: Inclusive for everyone
|
||||
4. **Flexibility**: Adaptable to different contexts
|
||||
5. **Efficiency**: Streamlined user journeys
|
||||
6. **Delight**: Enjoyable to use
|
||||
|
||||
## Component Architecture
|
||||
|
||||
### Component Hierarchy
|
||||
|
||||
```
|
||||
Atoms (Base)
|
||||
↓
|
||||
Molecules (Combined Atoms)
|
||||
↓
|
||||
Organisms (Sections)
|
||||
↓
|
||||
Templates (Page layouts)
|
||||
↓
|
||||
Pages (Full implementations)
|
||||
```
|
||||
|
||||
### Atomic Design Example
|
||||
|
||||
```
|
||||
Button (Atom)
|
||||
↓
|
||||
Search Input (Molecule: Input + Icon + Button)
|
||||
↓
|
||||
Header (Organism: Search + Navigation)
|
||||
↓
|
||||
Website (Page: Full layout)
|
||||
```
|
||||
|
||||
### Component Documentation
|
||||
|
||||
```markdown
|
||||
# Button Component
|
||||
|
||||
## Usage
|
||||
Use Button for user-triggered actions.
|
||||
|
||||
## Variants
|
||||
- Primary (prominent actions)
|
||||
- Secondary (less prominent)
|
||||
- Danger (destructive actions)
|
||||
- Disabled (unavailable state)
|
||||
|
||||
## Props
|
||||
- label: string - Button text
|
||||
- onClick: function - Click handler
|
||||
- disabled: boolean - Disable state
|
||||
- size: 'small' | 'medium' | 'large'
|
||||
|
||||
## Code Example
|
||||
<Button label="Click me" onClick={handleClick} />
|
||||
|
||||
## Accessibility
|
||||
- Keyboard accessible
|
||||
- ARIA labels for icon buttons
|
||||
- Focus indicators visible
|
||||
```
|
||||
|
||||
### React Component Implementation
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Button.css';
|
||||
|
||||
export const Button = ({
|
||||
label,
|
||||
onClick,
|
||||
variant = 'primary',
|
||||
size = 'medium',
|
||||
disabled = false,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
className={`button button--${variant} button--${size}`}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
aria-label={label}
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
|
||||
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
```
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### What Are Design Tokens?
|
||||
|
||||
Design tokens are named values representing design decisions:
|
||||
|
||||
```
|
||||
{
|
||||
"colors": {
|
||||
"primary": "#0066CC",
|
||||
"secondary": "#66CC33",
|
||||
"error": "#CC0000"
|
||||
},
|
||||
"typography": {
|
||||
"fontFamily": "Inter, system-ui, sans-serif",
|
||||
"fontSize": {
|
||||
"small": "12px",
|
||||
"medium": "16px",
|
||||
"large": "20px"
|
||||
}
|
||||
},
|
||||
"spacing": {
|
||||
"xs": "4px",
|
||||
"sm": "8px",
|
||||
"md": "16px",
|
||||
"lg": "24px",
|
||||
"xl": "32px"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Token Categories
|
||||
|
||||
- **Color tokens**: Semantic color names
|
||||
- **Typography tokens**: Font properties
|
||||
- **Spacing tokens**: Margin and padding values
|
||||
- **Shadow tokens**: Box shadow definitions
|
||||
- **Border tokens**: Border radius and width
|
||||
- **Animation tokens**: Timing and easing functions
|
||||
|
||||
### CSS Custom Properties
|
||||
|
||||
Using tokens in CSS:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: #0066CC;
|
||||
--color-secondary: #66CC33;
|
||||
--font-family: 'Inter', system-ui, sans-serif;
|
||||
--spacing-unit: 8px;
|
||||
--radius-small: 4px;
|
||||
--radius-medium: 8px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: var(--color-primary);
|
||||
padding: calc(var(--spacing-unit) * 2);
|
||||
border-radius: var(--radius-medium);
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
```
|
||||
|
||||
## Documentation & Governance
|
||||
|
||||
### Living Documentation
|
||||
|
||||
Keep documentation up-to-date and accessible:
|
||||
|
||||
**Storybook**: Interactive component documentation
|
||||
**Figma**: Design specifications and prototypes
|
||||
**Wiki**: Brand guidelines and usage
|
||||
**Design Tokens**: Centralized token definitions
|
||||
|
||||
### Version Control
|
||||
|
||||
Managing system evolution:
|
||||
|
||||
```
|
||||
Version 1.0
|
||||
├── Colors
|
||||
├── Typography
|
||||
└── Basic Components
|
||||
|
||||
Version 1.1
|
||||
├── Updated color palette
|
||||
├── Added spacing scale
|
||||
└── Enhanced accessibility
|
||||
|
||||
Version 2.0
|
||||
├── New component library
|
||||
├── Design tokens system
|
||||
└── Documentation overhaul
|
||||
```
|
||||
|
||||
### Governance Model
|
||||
|
||||
Decision-making structure:
|
||||
|
||||
**Stewardship Team**
|
||||
- Design lead
|
||||
- Engineering lead
|
||||
- Product stakeholder
|
||||
- Design system owner
|
||||
|
||||
**Review Process**
|
||||
1. Proposal submission
|
||||
2. Team discussion
|
||||
3. Prototype/testing
|
||||
4. Documentation
|
||||
5. Release approval
|
||||
|
||||
## Implementation & Adoption
|
||||
|
||||
### Team Structure
|
||||
|
||||
**Design System Team**
|
||||
- Design System Manager
|
||||
- Product Designer
|
||||
- Engineer
|
||||
- QA/Testing
|
||||
|
||||
### Rollout Strategy
|
||||
|
||||
**Phase 1: Foundation (Months 1-3)**
|
||||
- Establish governance
|
||||
- Create base components
|
||||
- Implement in pilot product
|
||||
|
||||
**Phase 2: Expansion (Months 4-6)**
|
||||
- Expand component library
|
||||
- Adopt in more products
|
||||
- Gather feedback
|
||||
|
||||
**Phase 3: Maturity (Months 6+)**
|
||||
- Refine based on usage
|
||||
- Scale to all products
|
||||
- Continuous improvement
|
||||
|
||||
### Adoption Metrics
|
||||
|
||||
Track system health:
|
||||
|
||||
- % of components used from system
|
||||
- Time to implement designs
|
||||
- Bug reduction
|
||||
- Design-development handoff time
|
||||
- Team satisfaction scores
|
||||
|
||||
## Tools & Workflows
|
||||
|
||||
### Design Tools
|
||||
|
||||
**Figma**: Collaborative design and prototyping
|
||||
**Adobe XD**: Professional design tool
|
||||
**Sketch**: Mac-only design tool
|
||||
|
||||
### Development Tools
|
||||
|
||||
**Storybook**: Component documentation
|
||||
**Chromatic**: Visual testing
|
||||
**Jest**: Unit testing components
|
||||
**Cypress**: Integration testing
|
||||
|
||||
### Example Workflow
|
||||
|
||||
```
|
||||
1. Designer creates component in Figma
|
||||
2. Engineer builds component in code
|
||||
3. Component added to Storybook
|
||||
4. Automated tests validate
|
||||
5. Deploy to component library
|
||||
6. Products can use component
|
||||
7. Monitor usage and feedback
|
||||
8. Iterate and improve
|
||||
```
|
||||
|
||||
## Scaling & Maintenance
|
||||
|
||||
### As Design System Grows
|
||||
|
||||
**Component Inventory**
|
||||
- Maintain list of all components
|
||||
- Track usage across products
|
||||
- Identify unused components
|
||||
- Plan deprecations
|
||||
|
||||
**Backwards Compatibility**
|
||||
- Semantic versioning (Major.Minor.Patch)
|
||||
- Migration guides for breaking changes
|
||||
- Deprecation warnings
|
||||
- Extended support periods
|
||||
|
||||
### Common Challenges
|
||||
|
||||
**Adoption**: Help teams understand value
|
||||
**Maintenance**: Keep components updated
|
||||
**Evolution**: Balance innovation with stability
|
||||
**Communication**: Keep stakeholders informed
|
||||
|
||||
### Continuous Improvement
|
||||
|
||||
1. **Gather Feedback**: Regular surveys and interviews
|
||||
2. **Monitor Usage**: Track component adoption
|
||||
3. **Analyze Metrics**: Measure impact
|
||||
4. **Plan Improvements**: Prioritize enhancements
|
||||
5. **Communicate Changes**: Regular updates
|
||||
6. **Celebrate Wins**: Show team the impact
|
||||
|
||||
## Conclusion
|
||||
|
||||
Building a successful design system takes time, effort, and commitment from the entire organization. Start small, prove value, and scale intentionally. A well-maintained design system becomes an invaluable asset that improves products, streamlines workflows, and empowers teams to build consistently.
|
||||
487
public/courses/nlp-transformers.md
Normal file
487
public/courses/nlp-transformers.md
Normal file
|
|
@ -0,0 +1,487 @@
|
|||
# NLP with Transformers & Large Language Models
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to NLP & Transformers](#introduction)
|
||||
2. [Understanding Transformer Architecture](#transformers)
|
||||
3. [Pre-trained Language Models](#pretrained)
|
||||
4. [Fine-tuning & Transfer Learning](#finetuning)
|
||||
5. [Working with LLMs](#llms)
|
||||
6. [Advanced Techniques](#advanced)
|
||||
7. [Production Deployment](#deployment)
|
||||
8. [Future Directions](#future)
|
||||
|
||||
## Introduction to NLP & Transformers
|
||||
|
||||
Natural Language Processing (NLP) has undergone a revolutionary transformation with the introduction of Transformer models. This course covers the state-of-the-art techniques for working with transformers and large language models (LLMs).
|
||||
|
||||
### Evolution of NLP
|
||||
|
||||
Historical progression:
|
||||
|
||||
- **Statistical NLP**: Rule-based and probabilistic models
|
||||
- **Word Embeddings**: Word2Vec, GloVe (2013-2015)
|
||||
- **RNNs/LSTMs**: Sequential processing (2014-2016)
|
||||
- **Attention Mechanism**: Vaswani et al., 2017
|
||||
- **Transformers**: Parallel processing revolution
|
||||
- **Large Language Models**: GPT, BERT, T5, and beyond
|
||||
|
||||
### Why Transformers?
|
||||
|
||||
Key advantages:
|
||||
|
||||
- Parallel processing capability
|
||||
- Better long-range dependencies
|
||||
- Easier to scale to large datasets
|
||||
- Transfer learning friendly
|
||||
- State-of-the-art performance across tasks
|
||||
|
||||
## Understanding Transformer Architecture
|
||||
|
||||
### Self-Attention Mechanism
|
||||
|
||||
The core innovation of transformers:
|
||||
|
||||
```python
|
||||
import torch
|
||||
import torch.nn.functional as F
|
||||
|
||||
def scaled_dot_product_attention(query, key, value, mask=None):
|
||||
"""
|
||||
Compute scaled dot-product attention.
|
||||
|
||||
Args:
|
||||
query: (batch, seq_len, d_k)
|
||||
key: (batch, seq_len, d_k)
|
||||
value: (batch, seq_len, d_v)
|
||||
mask: Optional mask to prevent attention to certain positions
|
||||
|
||||
Returns:
|
||||
output: (batch, seq_len, d_v)
|
||||
attention_weights: (batch, seq_len, seq_len)
|
||||
"""
|
||||
d_k = query.shape[-1]
|
||||
|
||||
# Compute attention scores
|
||||
scores = torch.matmul(query, key.transpose(-2, -1)) / torch.sqrt(torch.tensor(d_k, dtype=torch.float32))
|
||||
|
||||
# Apply mask if provided
|
||||
if mask is not None:
|
||||
scores = scores.masked_fill(mask == 0, float('-inf'))
|
||||
|
||||
# Apply softmax
|
||||
attention_weights = F.softmax(scores, dim=-1)
|
||||
|
||||
# Compute output
|
||||
output = torch.matmul(attention_weights, value)
|
||||
|
||||
return output, attention_weights
|
||||
```
|
||||
|
||||
### Multi-Head Attention
|
||||
|
||||
Parallel attention representations:
|
||||
|
||||
```python
|
||||
import torch
|
||||
import torch.nn as nn
|
||||
|
||||
class MultiHeadAttention(nn.Module):
|
||||
def __init__(self, d_model, num_heads):
|
||||
super().__init__()
|
||||
assert d_model % num_heads == 0, "d_model must be divisible by num_heads"
|
||||
|
||||
self.d_model = d_model
|
||||
self.num_heads = num_heads
|
||||
self.d_k = d_model // num_heads
|
||||
|
||||
# Linear layers for projections
|
||||
self.W_q = nn.Linear(d_model, d_model)
|
||||
self.W_k = nn.Linear(d_model, d_model)
|
||||
self.W_v = nn.Linear(d_model, d_model)
|
||||
self.W_o = nn.Linear(d_model, d_model)
|
||||
|
||||
def forward(self, query, key, value, mask=None):
|
||||
batch_size = query.shape[0]
|
||||
|
||||
# Project and split into heads
|
||||
Q = self.W_q(query).view(batch_size, -1, self.num_heads, self.d_k).transpose(1, 2)
|
||||
K = self.W_k(key).view(batch_size, -1, self.num_heads, self.d_k).transpose(1, 2)
|
||||
V = self.W_v(value).view(batch_size, -1, self.num_heads, self.d_k).transpose(1, 2)
|
||||
|
||||
# Apply attention
|
||||
attn_output, _ = scaled_dot_product_attention(Q, K, V, mask)
|
||||
|
||||
# Concatenate heads
|
||||
attn_output = attn_output.transpose(1, 2).contiguous()
|
||||
attn_output = attn_output.view(batch_size, -1, self.d_model)
|
||||
|
||||
# Final linear projection
|
||||
output = self.W_o(attn_output)
|
||||
|
||||
return output
|
||||
```
|
||||
|
||||
### Complete Transformer Block
|
||||
|
||||
Full encoder/decoder architecture:
|
||||
|
||||
```python
|
||||
class TransformerBlock(nn.Module):
|
||||
def __init__(self, d_model, num_heads, d_ff, dropout_rate=0.1):
|
||||
super().__init__()
|
||||
|
||||
self.attention = MultiHeadAttention(d_model, num_heads)
|
||||
self.feed_forward = nn.Sequential(
|
||||
nn.Linear(d_model, d_ff),
|
||||
nn.ReLU(),
|
||||
nn.Linear(d_ff, d_model)
|
||||
)
|
||||
|
||||
self.norm1 = nn.LayerNorm(d_model)
|
||||
self.norm2 = nn.LayerNorm(d_model)
|
||||
self.dropout = nn.Dropout(dropout_rate)
|
||||
|
||||
def forward(self, x, mask=None):
|
||||
# Self-attention with residual connection
|
||||
attn_output = self.attention(x, x, x, mask)
|
||||
x = self.norm1(x + self.dropout(attn_output))
|
||||
|
||||
# Feed-forward with residual connection
|
||||
ff_output = self.feed_forward(x)
|
||||
x = self.norm2(x + self.dropout(ff_output))
|
||||
|
||||
return x
|
||||
```
|
||||
|
||||
## Pre-trained Language Models
|
||||
|
||||
### BERT (Bidirectional Encoder Representations)
|
||||
|
||||
```python
|
||||
from transformers import BertTokenizer, BertModel
|
||||
import torch
|
||||
|
||||
# Load pre-trained BERT
|
||||
tokenizer = BertTokenizer.from_pretrained('bert-base-uncased')
|
||||
model = BertModel.from_pretrained('bert-base-uncased')
|
||||
|
||||
# Tokenize input
|
||||
text = "The cat sat on the mat"
|
||||
tokens = tokenizer(text, return_tensors='pt')
|
||||
|
||||
# Get embeddings
|
||||
with torch.no_grad():
|
||||
outputs = model(**tokens)
|
||||
last_hidden_state = outputs.last_hidden_state
|
||||
pooled_output = outputs.pooler_output
|
||||
|
||||
print(f"Sequence length: {last_hidden_state.shape[1]}")
|
||||
print(f"Hidden dimension: {last_hidden_state.shape[2]}")
|
||||
```
|
||||
|
||||
### GPT (Generative Pre-trained Transformer)
|
||||
|
||||
```python
|
||||
from transformers import GPT2Tokenizer, GPT2LMHeadModel
|
||||
|
||||
# Load GPT-2
|
||||
tokenizer = GPT2Tokenizer.from_pretrained('gpt2')
|
||||
model = GPT2LMHeadModel.from_pretrained('gpt2')
|
||||
|
||||
# Generate text
|
||||
prompt = "The future of AI is"
|
||||
input_ids = tokenizer.encode(prompt, return_tensors='pt')
|
||||
|
||||
# Generate with constraints
|
||||
output = model.generate(
|
||||
input_ids,
|
||||
max_length=100,
|
||||
num_return_sequences=3,
|
||||
temperature=0.7,
|
||||
top_p=0.9,
|
||||
no_repeat_ngram_size=2
|
||||
)
|
||||
|
||||
for i, sample in enumerate(output):
|
||||
print(f"Sample {i+1}:")
|
||||
print(tokenizer.decode(sample, skip_special_tokens=True))
|
||||
```
|
||||
|
||||
### T5 (Text-to-Text Transfer Transformer)
|
||||
|
||||
```python
|
||||
from transformers import T5Tokenizer, T5ForConditionalGeneration
|
||||
|
||||
# Load T5
|
||||
tokenizer = T5Tokenizer.from_pretrained('t5-base')
|
||||
model = T5ForConditionalGeneration.from_pretrained('t5-base')
|
||||
|
||||
# T5 prefix-based tasks
|
||||
tasks = {
|
||||
'translate': 'translate English to French: The quick brown fox',
|
||||
'summarize': 'summarize: The quick brown fox jumps over the lazy dog',
|
||||
'question': 'question: What is the capital of France?'
|
||||
}
|
||||
|
||||
for task, input_text in tasks.items():
|
||||
input_ids = tokenizer(input_text, return_tensors='pt').input_ids
|
||||
|
||||
output = model.generate(input_ids, max_length=50)
|
||||
result = tokenizer.decode(output[0], skip_special_tokens=True)
|
||||
|
||||
print(f"{task}: {result}")
|
||||
```
|
||||
|
||||
## Fine-tuning & Transfer Learning
|
||||
|
||||
### Fine-tuning BERT for Classification
|
||||
|
||||
```python
|
||||
from transformers import BertForSequenceClassification, Trainer, TrainingArguments
|
||||
from datasets import load_dataset
|
||||
|
||||
# Load dataset
|
||||
dataset = load_dataset('imdb')
|
||||
|
||||
# Load model for classification
|
||||
model = BertForSequenceClassification.from_pretrained('bert-base-uncased', num_labels=2)
|
||||
|
||||
# Define training arguments
|
||||
training_args = TrainingArguments(
|
||||
output_dir='./results',
|
||||
num_train_epochs=3,
|
||||
per_device_train_batch_size=8,
|
||||
per_device_eval_batch_size=8,
|
||||
warmup_steps=500,
|
||||
weight_decay=0.01,
|
||||
logging_dir='./logs',
|
||||
learning_rate=2e-5,
|
||||
)
|
||||
|
||||
# Create trainer
|
||||
trainer = Trainer(
|
||||
model=model,
|
||||
args=training_args,
|
||||
train_dataset=dataset['train'],
|
||||
eval_dataset=dataset['test'],
|
||||
)
|
||||
|
||||
# Train
|
||||
trainer.train()
|
||||
|
||||
# Evaluate
|
||||
eval_results = trainer.evaluate()
|
||||
print(f"Accuracy: {eval_results['eval_accuracy']:.4f}")
|
||||
```
|
||||
|
||||
### Fine-tuning with LoRA (Low-Rank Adaptation)
|
||||
|
||||
Efficient fine-tuning for large models:
|
||||
|
||||
```python
|
||||
from peft import LoraConfig, get_peft_model
|
||||
from transformers import AutoModelForCausalLM
|
||||
|
||||
# Load base model
|
||||
base_model = AutoModelForCausalLM.from_pretrained('gpt2')
|
||||
|
||||
# Configure LoRA
|
||||
lora_config = LoraConfig(
|
||||
r=8,
|
||||
lora_alpha=16,
|
||||
lora_dropout=0.05,
|
||||
bias='none',
|
||||
task_type='CAUSAL_LM',
|
||||
target_modules=['c_attn', 'c_proj']
|
||||
)
|
||||
|
||||
# Get PEFT model
|
||||
model = get_peft_model(base_model, lora_config)
|
||||
|
||||
# Only train LoRA parameters
|
||||
trainable_params = sum(p.numel() for p in model.parameters() if p.requires_grad)
|
||||
print(f"Trainable parameters: {trainable_params:,}")
|
||||
```
|
||||
|
||||
## Working with LLMs
|
||||
|
||||
### Using LLM APIs
|
||||
|
||||
```python
|
||||
import anthropic
|
||||
import openai
|
||||
|
||||
# Using Claude API
|
||||
client = anthropic.Anthropic(api_key="your-api-key")
|
||||
|
||||
message = client.messages.create(
|
||||
model="claude-3-sonnet-20240229",
|
||||
max_tokens=1024,
|
||||
messages=[
|
||||
{"role": "user", "content": "Explain transformers in simple terms"}
|
||||
]
|
||||
)
|
||||
|
||||
print(message.content[0].text)
|
||||
|
||||
# Using OpenAI API
|
||||
openai.api_key = "your-api-key"
|
||||
|
||||
response = openai.ChatCompletion.create(
|
||||
model="gpt-4",
|
||||
messages=[
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "What is machine learning?"}
|
||||
],
|
||||
temperature=0.7
|
||||
)
|
||||
|
||||
print(response.choices[0].message.content)
|
||||
```
|
||||
|
||||
### Prompt Engineering
|
||||
|
||||
Techniques for better results:
|
||||
|
||||
```python
|
||||
def few_shot_prompt(examples, query):
|
||||
"""Few-shot learning example"""
|
||||
prompt = "Classify the following sentiment:\n\n"
|
||||
|
||||
for example in examples:
|
||||
prompt += f"Text: {example['text']}\nSentiment: {example['sentiment']}\n\n"
|
||||
|
||||
prompt += f"Text: {query}\nSentiment:"
|
||||
return prompt
|
||||
|
||||
examples = [
|
||||
{"text": "This movie is great!", "sentiment": "Positive"},
|
||||
{"text": "I didn't enjoy the book.", "sentiment": "Negative"},
|
||||
]
|
||||
|
||||
query = "The game is amazing"
|
||||
prompt = few_shot_prompt(examples, query)
|
||||
```
|
||||
|
||||
### Retrieval-Augmented Generation (RAG)
|
||||
|
||||
Combining LLMs with external knowledge:
|
||||
|
||||
```python
|
||||
from langchain.embeddings import HuggingFaceEmbeddings
|
||||
from langchain.vectorstores import FAISS
|
||||
from langchain.text_splitter import CharacterTextSplitter
|
||||
from langchain.llms import OpenAI
|
||||
from langchain.chains import RetrievalQA
|
||||
|
||||
# Load documents
|
||||
documents = load_documents("path/to/documents")
|
||||
|
||||
# Split documents
|
||||
text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=200)
|
||||
docs = text_splitter.split_documents(documents)
|
||||
|
||||
# Create embeddings
|
||||
embeddings = HuggingFaceEmbeddings()
|
||||
|
||||
# Create vector store
|
||||
vectorstore = FAISS.from_documents(docs, embeddings)
|
||||
|
||||
# Create QA chain
|
||||
llm = OpenAI()
|
||||
qa_chain = RetrievalQA.from_chain_type(
|
||||
llm=llm,
|
||||
chain_type="stuff",
|
||||
retriever=vectorstore.as_retriever()
|
||||
)
|
||||
|
||||
# Query
|
||||
result = qa_chain.run("What is the main topic?")
|
||||
print(result)
|
||||
```
|
||||
|
||||
## Advanced Techniques
|
||||
|
||||
### Quantization for Efficiency
|
||||
|
||||
```python
|
||||
from transformers import AutoModelForCausalLM, BitsAndBytesConfig
|
||||
import torch
|
||||
|
||||
# Configure quantization
|
||||
quantization_config = BitsAndBytesConfig(
|
||||
load_in_8bit=True,
|
||||
bnb_8bit_compute_dtype=torch.float16,
|
||||
)
|
||||
|
||||
# Load quantized model
|
||||
model = AutoModelForCausalLM.from_pretrained(
|
||||
"meta-llama/Llama-2-7b",
|
||||
quantization_config=quantization_config,
|
||||
device_map="auto"
|
||||
)
|
||||
|
||||
# Model now uses 8-bit precision, reducing memory by ~4x
|
||||
```
|
||||
|
||||
### Multi-GPU Training
|
||||
|
||||
```python
|
||||
from torch.nn import DataParallel
|
||||
import torch.distributed as dist
|
||||
from torch.nn.parallel import DistributedDataParallel as DDP
|
||||
|
||||
# Initialize distributed training
|
||||
dist.init_process_group(backend='nccl')
|
||||
|
||||
model = model.to(torch.device('cuda', rank))
|
||||
model = DDP(model, device_ids=[rank])
|
||||
|
||||
# Training continues as normal
|
||||
# Loss is automatically synchronized across GPUs
|
||||
```
|
||||
|
||||
## Production Deployment
|
||||
|
||||
### Model Serving
|
||||
|
||||
```python
|
||||
from fastapi import FastAPI
|
||||
from pydantic import BaseModel
|
||||
from transformers import pipeline
|
||||
|
||||
app = FastAPI()
|
||||
|
||||
# Load model once
|
||||
classifier = pipeline(
|
||||
"text-classification",
|
||||
model="distilbert-base-uncased-finetuned-sst-2-english"
|
||||
)
|
||||
|
||||
class TextInput(BaseModel):
|
||||
text: str
|
||||
|
||||
@app.post("/classify")
|
||||
async def classify_text(input: TextInput):
|
||||
result = classifier(input.text)
|
||||
return {
|
||||
"text": input.text,
|
||||
"label": result[0]["label"],
|
||||
"score": result[0]["score"]
|
||||
}
|
||||
|
||||
# Run with: uvicorn app:app --reload
|
||||
```
|
||||
|
||||
## Future Directions
|
||||
|
||||
The field of NLP continues to evolve rapidly:
|
||||
|
||||
- **Multimodal Models**: Combining text, images, and audio
|
||||
- **Efficient Models**: Smaller, faster alternatives to large LLMs
|
||||
- **Reasoning**: Better handling of complex logical tasks
|
||||
- **Interpretability**: Understanding model decisions
|
||||
- **Real-time Adaptation**: Updating knowledge without retraining
|
||||
|
||||
Master these foundational concepts and you'll be well-positioned to work with cutting-edge NLP technologies.
|
||||
358
public/courses/product-strategy.md
Normal file
358
public/courses/product-strategy.md
Normal file
|
|
@ -0,0 +1,358 @@
|
|||
# Product Strategy & Roadmapping
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to Product Strategy](#introduction)
|
||||
2. [Defining Product Vision](#vision)
|
||||
3. [Understanding Users & Markets](#users)
|
||||
4. [Competitive Analysis](#competition)
|
||||
5. [Building Your Roadmap](#roadmap)
|
||||
6. [Prioritization Frameworks](#prioritization)
|
||||
7. [Communication & Execution](#execution)
|
||||
8. [Measuring Success](#measurement)
|
||||
|
||||
## Introduction to Product Strategy
|
||||
|
||||
Product strategy is the high-level direction and approach for building and evolving a product to meet market needs and achieve business goals.
|
||||
|
||||
### Strategy Vs. Roadmap
|
||||
|
||||
**Strategy**: The "why" and "what"
|
||||
- Long-term vision (3-5 years)
|
||||
- Problem focus
|
||||
- Market positioning
|
||||
- Core principles
|
||||
|
||||
**Roadmap**: The "how" and "when"
|
||||
- Medium-term plans (6-18 months)
|
||||
- Feature focus
|
||||
- Timeline and sequencing
|
||||
- Resource allocation
|
||||
|
||||
### Strategic Questions
|
||||
|
||||
1. **Why does this product exist?** (Purpose)
|
||||
2. **Who do we serve?** (Target market)
|
||||
3. **What problem do we solve?** (Value proposition)
|
||||
4. **How are we different?** (Differentiation)
|
||||
5. **Where do we win?** (Competitive advantage)
|
||||
6. **What's our path to scale?** (Growth strategy)
|
||||
|
||||
## Defining Product Vision
|
||||
|
||||
### Vision Statement Framework
|
||||
|
||||
A good vision statement is:
|
||||
- **Inspirational**: Motivates the team
|
||||
- **Clear**: Everyone understands it
|
||||
- **Achievable**: Realistic but ambitious
|
||||
- **Measurable**: Know when you've achieved it
|
||||
|
||||
**Example:**
|
||||
> "Empower remote teams to do their best work by making collaboration effortless, regardless of timezone or location."
|
||||
|
||||
### Mission vs. Vision
|
||||
|
||||
**Mission**: What you do and for whom (present)
|
||||
> "We build productivity software for distributed teams"
|
||||
|
||||
**Vision**: What you want to achieve (future)
|
||||
> "A world where location is irrelevant to collaboration"
|
||||
|
||||
### Translating Vision to Strategy
|
||||
|
||||
```
|
||||
Vision
|
||||
↓
|
||||
Strategic Pillars (3-5 key focus areas)
|
||||
↓
|
||||
Objectives & Key Results (OKRs)
|
||||
↓
|
||||
Quarterly Initiatives
|
||||
↓
|
||||
Weekly Tasks
|
||||
```
|
||||
|
||||
## Understanding Users & Markets
|
||||
|
||||
### Jobs to Be Done Framework
|
||||
|
||||
Users don't buy products; they hire them to do a job:
|
||||
|
||||
**Functional Jobs**
|
||||
- What task do users want to accomplish?
|
||||
- Example: "Schedule meetings efficiently"
|
||||
|
||||
**Emotional Jobs**
|
||||
- How do users want to feel?
|
||||
- Example: "Feel organized and in control"
|
||||
|
||||
**Social Jobs**
|
||||
- How do users want to be perceived?
|
||||
- Example: "Seen as responsive and organized"
|
||||
|
||||
### User Personas
|
||||
|
||||
Semi-fictional representations of target customers:
|
||||
|
||||
```
|
||||
Name: Alex, Product Manager
|
||||
|
||||
Demographics:
|
||||
- Age: 32
|
||||
- Company size: 50-500 people
|
||||
- Role: Senior PM managing 3-5 people
|
||||
- Tech-savvy: High
|
||||
|
||||
Goals:
|
||||
- Launch products faster
|
||||
- Keep team aligned
|
||||
- Reduce meeting overhead
|
||||
|
||||
Pain Points:
|
||||
- Too many communication tools
|
||||
- Hard to see project status
|
||||
- Team scattered across timezones
|
||||
|
||||
Motivations:
|
||||
- Career advancement
|
||||
- Team success
|
||||
- Personal productivity
|
||||
|
||||
Tech preferences:
|
||||
- Uses Slack, GitHub, Linear
|
||||
- Prefers web and mobile apps
|
||||
- Adopts new tools quickly
|
||||
```
|
||||
|
||||
### Segmentation
|
||||
|
||||
Grouping customers by characteristics:
|
||||
|
||||
**Demographic**: Age, company size, location
|
||||
**Behavioral**: Usage patterns, purchase history
|
||||
**Psychographic**: Values, motivations, lifestyle
|
||||
**Geographic**: Location-based differences
|
||||
|
||||
## Competitive Analysis
|
||||
|
||||
### Competitive Positioning
|
||||
|
||||
Map your product relative to competitors:
|
||||
|
||||
```
|
||||
Ease of Use
|
||||
↑
|
||||
|
|
||||
Our Product | Competitor A
|
||||
* | *
|
||||
|
|
||||
Competitor B | Competitor C
|
||||
* | *
|
||||
______________|______________→ Features/Functionality
|
||||
|
|
||||
```
|
||||
|
||||
### SWOT Analysis
|
||||
|
||||
**Strengths**: Internal capabilities
|
||||
- Best-in-class team
|
||||
- Unique technology
|
||||
- Strong brand
|
||||
|
||||
**Weaknesses**: Internal limitations
|
||||
- Limited resources
|
||||
- Newer to market
|
||||
- Smaller user base
|
||||
|
||||
**Opportunities**: External advantages
|
||||
- Growing market
|
||||
- Adjacent markets
|
||||
- Partnership potential
|
||||
|
||||
**Threats**: External risks
|
||||
- Well-funded competitors
|
||||
- Market saturation
|
||||
- Changing regulations
|
||||
|
||||
### Differentiation Strategy
|
||||
|
||||
How you stand out:
|
||||
|
||||
1. **Product-based**: Superior features, quality, or performance
|
||||
2. **Price-based**: Most affordable option
|
||||
3. **Service-based**: Best customer support
|
||||
4. **Brand-based**: Emotional connection, values alignment
|
||||
5. **Distribution-based**: Easiest to buy/access
|
||||
|
||||
## Building Your Roadmap
|
||||
|
||||
### Roadmap Types
|
||||
|
||||
**Feature Roadmap**: What features you'll build
|
||||
**Initiative Roadmap**: Major projects/outcomes
|
||||
**Portfolio Roadmap**: Multiple products/platforms
|
||||
**Release Roadmap**: What ships when
|
||||
|
||||
### Roadmap Structure
|
||||
|
||||
```
|
||||
Timeline: 2024 Q1 | Q2 | Q3 | Q4
|
||||
↓
|
||||
Track 1: Performance
|
||||
- Database optimization
|
||||
- Caching improvements
|
||||
- Analytics pipeline
|
||||
|
||||
Track 2: New Features
|
||||
- Advanced reporting
|
||||
- API access
|
||||
- Integrations
|
||||
|
||||
Track 3: User Experience
|
||||
- Redesigned dashboard
|
||||
- Mobile improvements
|
||||
- Accessibility enhancements
|
||||
```
|
||||
|
||||
### Roadmap Communication
|
||||
|
||||
Different audiences need different details:
|
||||
|
||||
**Executive**: High-level outcomes, business impact, timelines
|
||||
**Customers**: Features they care about, benefits
|
||||
**Team**: Detailed scope, dependencies, risks, resources
|
||||
|
||||
## Prioritization Frameworks
|
||||
|
||||
### RICE Scoring
|
||||
|
||||
Prioritize by impact and effort:
|
||||
|
||||
**Reach**: How many users affected?
|
||||
**Impact**: How much will it matter to each user?
|
||||
**Confidence**: How certain are you?
|
||||
**Effort**: How much work is required?
|
||||
|
||||
Score = (Reach × Impact × Confidence) / Effort
|
||||
|
||||
### Kano Model
|
||||
|
||||
Three dimensions of product attributes:
|
||||
|
||||
**Basic Needs**: Must haves
|
||||
- Stability, security, core functionality
|
||||
- Don't delight, but absence disappoints
|
||||
|
||||
**Satisfiers**: Performance factors
|
||||
- More = Better
|
||||
- Example: Feature completeness
|
||||
|
||||
**Delighters**: Unexpected pleasures
|
||||
- Create loyalty and positive emotion
|
||||
- Example: Smooth animations, thoughtful UX
|
||||
|
||||
### Eisenhower Matrix
|
||||
|
||||
Prioritize by importance and urgency:
|
||||
|
||||
```
|
||||
Important
|
||||
↑
|
||||
|
|
||||
Quadrant 2 | Quadrant 1
|
||||
(Important, | (Important,
|
||||
Not urgent) | Urgent)
|
||||
|
|
||||
──────────────|──────────────→ Urgent
|
||||
|
|
||||
Quadrant 3 | Quadrant 4
|
||||
(Not import- | (Not important,
|
||||
ant, Urgent) | Not urgent)
|
||||
```
|
||||
|
||||
## Communication & Execution
|
||||
|
||||
### OKR Framework
|
||||
|
||||
Objectives and Key Results align teams:
|
||||
|
||||
**Objectives**: Qualitative direction
|
||||
- "Establish thought leadership in AI"
|
||||
- "Become easiest to use"
|
||||
|
||||
**Key Results**: Quantifiable outcomes
|
||||
- "Achieve 10K followers on Twitter"
|
||||
- "Improve CSAT from 7.2 to 8.5"
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
Q2 Objective: "Improve product reliability"
|
||||
|
||||
Key Results:
|
||||
1. Reduce critical bugs by 50%
|
||||
2. Achieve 99.9% uptime
|
||||
3. Reduce mean time to resolution from 4hrs to 1hr
|
||||
```
|
||||
|
||||
### Stakeholder Communication
|
||||
|
||||
**Executive sponsors**
|
||||
- Focus: Business impact, resource needs, risks
|
||||
- Cadence: Monthly or quarterly reviews
|
||||
|
||||
**Cross-functional teams**
|
||||
- Focus: Dependencies, timelines, requirements
|
||||
- Cadence: Weekly syncs, sprint planning
|
||||
|
||||
**Customers**
|
||||
- Focus: Benefits, timelines, how it helps
|
||||
- Cadence: Monthly releases, beta access
|
||||
|
||||
## Measuring Success
|
||||
|
||||
### Product Metrics
|
||||
|
||||
**Adoption**
|
||||
- % of users using new feature
|
||||
- Time to value (how quickly users see benefit)
|
||||
|
||||
**Engagement**
|
||||
- Daily/monthly active users
|
||||
- Feature usage frequency
|
||||
|
||||
**Retention**
|
||||
- Churn rate (% lost)
|
||||
- Cohort retention (% staying by signup month)
|
||||
|
||||
**Revenue**
|
||||
- Monthly recurring revenue (MRR)
|
||||
- Customer lifetime value (LTV)
|
||||
|
||||
### Leading vs. Lagging Indicators
|
||||
|
||||
**Lagging Indicators** (Outcomes)
|
||||
- Churn rate
|
||||
- Revenue
|
||||
- Customer satisfaction
|
||||
|
||||
**Leading Indicators** (Predictive)
|
||||
- Feature adoption
|
||||
- User engagement
|
||||
- Support tickets
|
||||
|
||||
Monitor leading indicators to influence outcomes.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Successful product strategy requires:
|
||||
|
||||
1. **Understanding the market**: Know your users and competition
|
||||
2. **Clear vision**: Everyone should understand the direction
|
||||
3. **Disciplined prioritization**: Focus on what matters most
|
||||
4. **Regular communication**: Keep teams and stakeholders informed
|
||||
5. **Data-driven decisions**: Measure and iterate
|
||||
6. **Flexibility**: Adapt as market conditions change
|
||||
|
||||
Master these skills and you'll be equipped to lead products that create real value for users while achieving business goals.
|
||||
601
public/courses/python-intermediate.md
Normal file
601
public/courses/python-intermediate.md
Normal file
|
|
@ -0,0 +1,601 @@
|
|||
# Python for Game Development
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to Game Development](#introduction)
|
||||
2. [Pygame Basics](#pygame)
|
||||
3. [Game Loop & Architecture](#architecture)
|
||||
4. [Sprites & Graphics](#sprites)
|
||||
5. [Collision Detection](#collision)
|
||||
6. [Audio & Sound](#audio)
|
||||
7. [Game States & Menus](#states)
|
||||
8. [Building Complete Games](#complete)
|
||||
|
||||
## Introduction to Game Development
|
||||
|
||||
Game development with Python is accessible and fun. This course uses Pygame, a popular Python library for creating 2D games.
|
||||
|
||||
### Why Python for Games?
|
||||
|
||||
**Advantages:**
|
||||
- Beginner-friendly syntax
|
||||
- Rapid prototyping
|
||||
- Active community
|
||||
- Good documentation
|
||||
- Perfect for learning concepts
|
||||
|
||||
**Limitations:**
|
||||
- Not ideal for high-performance 3D
|
||||
- Mobile support limited
|
||||
- For serious projects, consider C++/UnityUnreal
|
||||
|
||||
### Setup & Installation
|
||||
|
||||
```bash
|
||||
# Install Pygame
|
||||
pip install pygame
|
||||
|
||||
# Create virtual environment
|
||||
python -m venv venv
|
||||
source venv/bin/activate # On Windows: venv\Scripts\activate
|
||||
|
||||
# Verify installation
|
||||
python -c "import pygame; print(pygame.__version__)"
|
||||
```
|
||||
|
||||
## Pygame Basics
|
||||
|
||||
### Your First Window
|
||||
|
||||
```python
|
||||
import pygame
|
||||
import sys
|
||||
|
||||
# Initialize Pygame
|
||||
pygame.init()
|
||||
|
||||
# Screen dimensions
|
||||
SCREEN_WIDTH = 800
|
||||
SCREEN_HEIGHT = 600
|
||||
|
||||
# Create screen
|
||||
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
|
||||
pygame.display.set_caption("My First Game")
|
||||
|
||||
# Game loop
|
||||
clock = pygame.time.Clock()
|
||||
running = True
|
||||
|
||||
while running:
|
||||
# Handle events
|
||||
for event in pygame.event.get():
|
||||
if event.type == pygame.QUIT:
|
||||
running = False
|
||||
|
||||
# Clear screen
|
||||
screen.fill((255, 255, 255)) # White background
|
||||
|
||||
# Update display
|
||||
pygame.display.flip()
|
||||
|
||||
# Control frame rate (60 FPS)
|
||||
clock.tick(60)
|
||||
|
||||
pygame.quit()
|
||||
sys.exit()
|
||||
```
|
||||
|
||||
### Handling Input
|
||||
|
||||
```python
|
||||
import pygame
|
||||
from enum import Enum
|
||||
|
||||
class InputState:
|
||||
def __init__(self):
|
||||
self.keys_pressed = set()
|
||||
self.mouse_pos = (0, 0)
|
||||
self.mouse_clicked = False
|
||||
|
||||
def update(self, event):
|
||||
if event.type == pygame.KEYDOWN:
|
||||
self.keys_pressed.add(event.key)
|
||||
elif event.type == pygame.KEYUP:
|
||||
self.keys_pressed.discard(event.key)
|
||||
elif event.type == pygame.MOUSEMOTION:
|
||||
self.mouse_pos = event.pos
|
||||
elif event.type == pygame.MOUSEBUTTONDOWN:
|
||||
self.mouse_clicked = True
|
||||
elif event.type == pygame.MOUSEBUTTONUP:
|
||||
self.mouse_clicked = False
|
||||
|
||||
def is_key_pressed(self, key):
|
||||
return key in self.keys_pressed
|
||||
|
||||
# Usage in game loop
|
||||
input_state = InputState()
|
||||
|
||||
while running:
|
||||
for event in pygame.event.get():
|
||||
if event.type == pygame.QUIT:
|
||||
running = False
|
||||
input_state.update(event)
|
||||
|
||||
# Check input
|
||||
if input_state.is_key_pressed(pygame.K_LEFT):
|
||||
player.move_left()
|
||||
if input_state.is_key_pressed(pygame.K_RIGHT):
|
||||
player.move_right()
|
||||
```
|
||||
|
||||
## Game Loop & Architecture
|
||||
|
||||
### Game Loop Pattern
|
||||
|
||||
```python
|
||||
class Game:
|
||||
def __init__(self, width=800, height=600):
|
||||
pygame.init()
|
||||
self.screen = pygame.display.set_mode((width, height))
|
||||
pygame.display.set_caption("Game")
|
||||
|
||||
self.clock = pygame.time.Clock()
|
||||
self.running = True
|
||||
self.dt = 0 # Delta time
|
||||
|
||||
def handle_events(self):
|
||||
"""Process input"""
|
||||
for event in pygame.event.get():
|
||||
if event.type == pygame.QUIT:
|
||||
self.running = False
|
||||
|
||||
def update(self, dt):
|
||||
"""Update game state"""
|
||||
pass
|
||||
|
||||
def draw(self):
|
||||
"""Render graphics"""
|
||||
self.screen.fill((0, 0, 0))
|
||||
pygame.display.flip()
|
||||
|
||||
def run(self):
|
||||
"""Main game loop"""
|
||||
while self.running:
|
||||
self.dt = self.clock.tick(60) / 1000.0 # Convert to seconds
|
||||
|
||||
self.handle_events()
|
||||
self.update(self.dt)
|
||||
self.draw()
|
||||
|
||||
pygame.quit()
|
||||
|
||||
# Run game
|
||||
if __name__ == "__main__":
|
||||
game = Game()
|
||||
game.run()
|
||||
```
|
||||
|
||||
## Sprites & Graphics
|
||||
|
||||
### Sprite Class
|
||||
|
||||
```python
|
||||
import pygame
|
||||
from dataclasses import dataclass
|
||||
from typing import Tuple
|
||||
|
||||
@dataclass
|
||||
class Vector2:
|
||||
x: float
|
||||
y: float
|
||||
|
||||
def __add__(self, other):
|
||||
return Vector2(self.x + other.x, self.y + other.y)
|
||||
|
||||
def __mul__(self, scalar):
|
||||
return Vector2(self.x * scalar, self.y * scalar)
|
||||
|
||||
class Player(pygame.sprite.Sprite):
|
||||
def __init__(self, x, y):
|
||||
super().__init__()
|
||||
|
||||
# Create surface
|
||||
self.image = pygame.Surface((50, 50))
|
||||
self.image.fill((0, 255, 0)) # Green
|
||||
|
||||
# Rect for positioning
|
||||
self.rect = self.image.get_rect(center=(x, y))
|
||||
|
||||
# Position and velocity
|
||||
self.pos = Vector2(x, y)
|
||||
self.vel = Vector2(0, 0)
|
||||
self.speed = 300 # pixels per second
|
||||
|
||||
def update(self, dt, input_state):
|
||||
# Handle input
|
||||
if input_state.is_key_pressed(pygame.K_LEFT):
|
||||
self.vel.x = -self.speed
|
||||
elif input_state.is_key_pressed(pygame.K_RIGHT):
|
||||
self.vel.x = self.speed
|
||||
else:
|
||||
self.vel.x = 0
|
||||
|
||||
# Update position
|
||||
self.pos = self.pos + self.vel.__mul__(dt)
|
||||
|
||||
# Update rect for drawing
|
||||
self.rect.center = (int(self.pos.x), int(self.pos.y))
|
||||
|
||||
def draw(self, surface):
|
||||
surface.blit(self.image, self.rect)
|
||||
|
||||
# Load and draw image sprites
|
||||
class Enemy(pygame.sprite.Sprite):
|
||||
def __init__(self, x, y, image_path):
|
||||
super().__init__()
|
||||
self.image = pygame.image.load(image_path)
|
||||
self.rect = self.image.get_rect(topleft=(x, y))
|
||||
|
||||
def draw(self, surface):
|
||||
surface.blit(self.image, self.rect)
|
||||
```
|
||||
|
||||
### Animation
|
||||
|
||||
```python
|
||||
class AnimatedSprite(pygame.sprite.Sprite):
|
||||
def __init__(self, frames, x, y, frame_duration=100):
|
||||
super().__init__()
|
||||
|
||||
self.frames = frames # List of surface objects
|
||||
self.current_frame = 0
|
||||
self.frame_duration = frame_duration # milliseconds
|
||||
self.frame_timer = 0
|
||||
|
||||
self.image = self.frames[0]
|
||||
self.rect = self.image.get_rect(topleft=(x, y))
|
||||
|
||||
def update(self, dt):
|
||||
self.frame_timer += dt * 1000 # Convert to milliseconds
|
||||
|
||||
if self.frame_timer >= self.frame_duration:
|
||||
self.frame_timer = 0
|
||||
self.current_frame = (self.current_frame + 1) % len(self.frames)
|
||||
self.image = self.frames[self.current_frame]
|
||||
|
||||
# Load frames from spritesheet
|
||||
def load_frames(spritesheet_path, frame_width, frame_height, num_frames):
|
||||
spritesheet = pygame.image.load(spritesheet_path)
|
||||
frames = []
|
||||
|
||||
for i in range(num_frames):
|
||||
x = (i % (spritesheet.get_width() // frame_width)) * frame_width
|
||||
y = (i // (spritesheet.get_width() // frame_width)) * frame_height
|
||||
|
||||
frame = spritesheet.subsurface((x, y, frame_width, frame_height))
|
||||
frames.append(frame)
|
||||
|
||||
return frames
|
||||
|
||||
# Usage
|
||||
frames = load_frames("player_walk.png", 32, 32, 8)
|
||||
player = AnimatedSprite(frames, 100, 100)
|
||||
```
|
||||
|
||||
## Collision Detection
|
||||
|
||||
### Rectangle Collision
|
||||
|
||||
```python
|
||||
class RectCollisionDetector:
|
||||
@staticmethod
|
||||
def check_collision(sprite1, sprite2):
|
||||
"""Check if two sprites overlap"""
|
||||
return sprite1.rect.colliderect(sprite2.rect)
|
||||
|
||||
@staticmethod
|
||||
def get_overlapping(sprite, group):
|
||||
"""Find all sprites in group that overlap with sprite"""
|
||||
return pygame.sprite.spritecollide(sprite, group, dokill=False)
|
||||
|
||||
@staticmethod
|
||||
def resolve_collision(sprite1, sprite2):
|
||||
"""Simple overlap resolution"""
|
||||
if sprite1.rect.colliderect(sprite2.rect):
|
||||
# Push sprite1 out of collision
|
||||
overlap_rect = sprite1.rect.clip(sprite2.rect)
|
||||
|
||||
if sprite1.rect.left < sprite2.rect.left:
|
||||
sprite1.rect.right = sprite2.rect.left
|
||||
else:
|
||||
sprite1.rect.left = sprite2.rect.right
|
||||
|
||||
return True
|
||||
return False
|
||||
|
||||
# Usage in game
|
||||
class Game:
|
||||
def __init__(self):
|
||||
self.player_group = pygame.sprite.Group()
|
||||
self.enemy_group = pygame.sprite.Group()
|
||||
self.bullet_group = pygame.sprite.Group()
|
||||
|
||||
def update(self, dt):
|
||||
# Check bullet-enemy collisions
|
||||
collisions = pygame.sprite.groupcollide(
|
||||
self.bullet_group,
|
||||
self.enemy_group,
|
||||
dokill=True,
|
||||
dokill2=True
|
||||
)
|
||||
|
||||
# Check player-enemy collisions
|
||||
player_hit = pygame.sprite.spritecollideany(
|
||||
self.player,
|
||||
self.enemy_group
|
||||
)
|
||||
if player_hit:
|
||||
self.player.take_damage(10)
|
||||
```
|
||||
|
||||
### Circle Collision
|
||||
|
||||
```python
|
||||
import math
|
||||
|
||||
class CircleCollider:
|
||||
def __init__(self, x, y, radius):
|
||||
self.x = x
|
||||
self.y = y
|
||||
self.radius = radius
|
||||
|
||||
def check_collision(self, other):
|
||||
"""Check collision with another circle"""
|
||||
dx = self.x - other.x
|
||||
dy = self.y - other.y
|
||||
distance = math.sqrt(dx*dx + dy*dy)
|
||||
|
||||
return distance < self.radius + other.radius
|
||||
|
||||
def point_in_circle(self, px, py):
|
||||
"""Check if point is inside circle"""
|
||||
dx = px - self.x
|
||||
dy = py - self.y
|
||||
return (dx*dx + dy*dy) < self.radius * self.radius
|
||||
|
||||
class CircleSprite(pygame.sprite.Sprite):
|
||||
def __init__(self, x, y, radius, color):
|
||||
super().__init__()
|
||||
self.collider = CircleCollider(x, y, radius)
|
||||
|
||||
self.image = pygame.Surface((radius*2, radius*2), pygame.SRCALPHA)
|
||||
pygame.draw.circle(self.image, color, (radius, radius), radius)
|
||||
|
||||
self.rect = self.image.get_rect(center=(x, y))
|
||||
|
||||
def update(self):
|
||||
self.collider.x = self.rect.centerx
|
||||
self.collider.y = self.rect.centery
|
||||
```
|
||||
|
||||
## Audio & Sound
|
||||
|
||||
### Playing Sounds
|
||||
|
||||
```python
|
||||
import pygame
|
||||
|
||||
class AudioManager:
|
||||
def __init__(self):
|
||||
pygame.mixer.init()
|
||||
self.sounds = {}
|
||||
self.music = None
|
||||
|
||||
def load_sound(self, name, filepath):
|
||||
"""Load a sound effect"""
|
||||
try:
|
||||
sound = pygame.mixer.Sound(filepath)
|
||||
self.sounds[name] = sound
|
||||
except pygame.error as e:
|
||||
print(f"Could not load sound {name}: {e}")
|
||||
|
||||
def play_sound(self, name, loops=0):
|
||||
"""Play a sound effect"""
|
||||
if name in self.sounds:
|
||||
self.sounds[name].play(loops=loops)
|
||||
|
||||
def load_music(self, filepath):
|
||||
"""Load background music"""
|
||||
try:
|
||||
pygame.mixer.music.load(filepath)
|
||||
except pygame.error as e:
|
||||
print(f"Could not load music: {e}")
|
||||
|
||||
def play_music(self, loops=-1):
|
||||
"""Play background music (loops=-1 loops forever)"""
|
||||
pygame.mixer.music.play(loops=loops)
|
||||
|
||||
def stop_music(self):
|
||||
pygame.mixer.music.stop()
|
||||
|
||||
def set_volume(self, volume):
|
||||
"""Set music volume (0.0 to 1.0)"""
|
||||
pygame.mixer.music.set_volume(volume)
|
||||
|
||||
# Usage
|
||||
audio = AudioManager()
|
||||
audio.load_sound("jump", "sounds/jump.wav")
|
||||
audio.load_music("background.mp3")
|
||||
|
||||
audio.play_music()
|
||||
audio.play_sound("jump")
|
||||
```
|
||||
|
||||
## Game States & Menus
|
||||
|
||||
### State Management
|
||||
|
||||
```python
|
||||
from enum import Enum, auto
|
||||
|
||||
class GameState(Enum):
|
||||
MENU = auto()
|
||||
PLAYING = auto()
|
||||
PAUSED = auto()
|
||||
GAME_OVER = auto()
|
||||
|
||||
class StateManager:
|
||||
def __init__(self):
|
||||
self.current_state = GameState.MENU
|
||||
|
||||
def change_state(self, new_state):
|
||||
self.current_state = new_state
|
||||
|
||||
class Game:
|
||||
def __init__(self):
|
||||
self.state_manager = StateManager()
|
||||
self.menu = Menu()
|
||||
self.game = GameWorld()
|
||||
self.game_over_screen = GameOverScreen()
|
||||
|
||||
def update(self, dt, input_state):
|
||||
if self.state_manager.current_state == GameState.MENU:
|
||||
self.menu.update(input_state)
|
||||
if self.menu.start_game():
|
||||
self.state_manager.change_state(GameState.PLAYING)
|
||||
|
||||
elif self.state_manager.current_state == GameState.PLAYING:
|
||||
if input_state.is_key_pressed(pygame.K_ESCAPE):
|
||||
self.state_manager.change_state(GameState.PAUSED)
|
||||
|
||||
self.game.update(dt, input_state)
|
||||
|
||||
if self.game.is_game_over():
|
||||
self.state_manager.change_state(GameState.GAME_OVER)
|
||||
|
||||
elif self.state_manager.current_state == GameState.PAUSED:
|
||||
if input_state.is_key_pressed(pygame.K_ESCAPE):
|
||||
self.state_manager.change_state(GameState.PLAYING)
|
||||
|
||||
elif self.state_manager.current_state == GameState.GAME_OVER:
|
||||
self.game_over_screen.update(input_state)
|
||||
if self.game_over_screen.restart():
|
||||
self.game = GameWorld()
|
||||
self.state_manager.change_state(GameState.MENU)
|
||||
|
||||
def draw(self, screen):
|
||||
screen.fill((0, 0, 0))
|
||||
|
||||
if self.state_manager.current_state == GameState.MENU:
|
||||
self.menu.draw(screen)
|
||||
elif self.state_manager.current_state == GameState.PLAYING:
|
||||
self.game.draw(screen)
|
||||
elif self.state_manager.current_state == GameState.GAME_OVER:
|
||||
self.game_over_screen.draw(screen)
|
||||
```
|
||||
|
||||
## Building Complete Games
|
||||
|
||||
### Simple Game Architecture
|
||||
|
||||
```python
|
||||
import pygame
|
||||
from enum import Enum, auto
|
||||
|
||||
class SimplePlatformer:
|
||||
def __init__(self):
|
||||
pygame.init()
|
||||
self.screen = pygame.display.set_mode((800, 600))
|
||||
pygame.display.set_caption("Simple Platformer")
|
||||
|
||||
self.clock = pygame.time.Clock()
|
||||
self.running = True
|
||||
|
||||
# Game objects
|
||||
self.player = Player(100, 500)
|
||||
self.platforms = pygame.sprite.Group()
|
||||
self.enemies = pygame.sprite.Group()
|
||||
|
||||
# Create level
|
||||
self.create_level()
|
||||
|
||||
def create_level(self):
|
||||
"""Create platforms and enemies"""
|
||||
# Create ground
|
||||
ground = Platform(0, 550, 800, 50)
|
||||
self.platforms.add(ground)
|
||||
|
||||
# Create platforms
|
||||
platform1 = Platform(150, 400, 200, 20)
|
||||
self.platforms.add(platform1)
|
||||
|
||||
# Create enemies
|
||||
enemy1 = Enemy(300, 450)
|
||||
self.enemies.add(enemy1)
|
||||
|
||||
def update(self, dt):
|
||||
# Update player
|
||||
input_state = self.get_input()
|
||||
self.player.update(dt, input_state, self.platforms)
|
||||
|
||||
# Update enemies
|
||||
for enemy in self.enemies:
|
||||
enemy.update(dt)
|
||||
|
||||
# Check collision with player
|
||||
if self.player.rect.colliderect(enemy.rect):
|
||||
self.player.take_damage(10)
|
||||
|
||||
def draw(self):
|
||||
self.screen.fill((135, 206, 235)) # Sky blue
|
||||
|
||||
self.platforms.draw(self.screen)
|
||||
self.player.draw(self.screen)
|
||||
|
||||
for enemy in self.enemies:
|
||||
enemy.draw(self.screen)
|
||||
|
||||
pygame.display.flip()
|
||||
|
||||
def get_input(self):
|
||||
input_state = InputState()
|
||||
keys = pygame.key.get_pressed()
|
||||
|
||||
if keys[pygame.K_LEFT]:
|
||||
input_state.keys_pressed.add(pygame.K_LEFT)
|
||||
if keys[pygame.K_RIGHT]:
|
||||
input_state.keys_pressed.add(pygame.K_RIGHT)
|
||||
if keys[pygame.K_SPACE]:
|
||||
input_state.keys_pressed.add(pygame.K_SPACE)
|
||||
|
||||
return input_state
|
||||
|
||||
def run(self):
|
||||
while self.running:
|
||||
for event in pygame.event.get():
|
||||
if event.type == pygame.QUIT:
|
||||
self.running = False
|
||||
|
||||
dt = self.clock.tick(60) / 1000.0
|
||||
self.update(dt)
|
||||
self.draw()
|
||||
|
||||
pygame.quit()
|
||||
|
||||
# Run game
|
||||
if __name__ == "__main__":
|
||||
game = SimplePlatformer()
|
||||
game.run()
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
You now have the foundations for creating games with Python. Key takeaways:
|
||||
|
||||
- **Game loop**: The core pattern of all games
|
||||
- **Sprite management**: Organize visual elements
|
||||
- **Collision detection**: Trigger game events
|
||||
- **State management**: Structure complex games
|
||||
- **Audio & animation**: Enhance game feel
|
||||
|
||||
Start with simple projects like Pong or Breakout, then progress to more complex games. Join the Pygame community, study existing games, and keep creating!
|
||||
345
public/courses/startup-fundamentals.md
Normal file
345
public/courses/startup-fundamentals.md
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
# Startup Fundamentals
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to Startups](#introduction)
|
||||
2. [Finding Your Idea](#ideas)
|
||||
3. [Market Research & Validation](#validation)
|
||||
4. [Building Your Team](#team)
|
||||
5. [Lean Startup Methodology](#lean)
|
||||
6. [Fundraising Essentials](#fundraising)
|
||||
7. [Growth & Scaling](#growth)
|
||||
8. [Common Pitfalls](#pitfalls)
|
||||
|
||||
## Introduction to Startups
|
||||
|
||||
A startup is a newly-formed business venture with high growth potential. This course covers the essentials for taking an idea from concept to sustainable business.
|
||||
|
||||
### What Makes a Startup?
|
||||
|
||||
**Characteristics:**
|
||||
- Solving a significant problem
|
||||
- Rapid growth potential
|
||||
- Innovation at core
|
||||
- Uncertain, risky environment
|
||||
- Constrained resources
|
||||
- Mission-driven team
|
||||
|
||||
### Startup Vs. Traditional Business
|
||||
|
||||
| Aspect | Startup | Traditional Business |
|
||||
|--------|---------|---------------------|
|
||||
| Growth | Rapid scaling focus | Steady, predictable |
|
||||
| Risk | High uncertainty | Lower risk, proven model |
|
||||
| Resources | Limited, creative use | Abundant, established budget |
|
||||
| Innovation | Core to strategy | Incremental improvement |
|
||||
| Culture | Experimental, fast | Stable, process-driven |
|
||||
| Timeline | Urgent, compressed | Long-term horizon |
|
||||
|
||||
## Finding Your Idea
|
||||
|
||||
### Common Startup Origins
|
||||
|
||||
1. **Personal Problem**: You experience the problem
|
||||
2. **Domain Expertise**: Deep knowledge of industry
|
||||
3. **Technology Breakthrough**: New capability enables solution
|
||||
4. **Market Gap**: Unmet customer need
|
||||
5. **Combination**: Existing ideas in new context
|
||||
|
||||
### Brainstorming Techniques
|
||||
|
||||
**Mind Mapping**
|
||||
```
|
||||
Central Idea
|
||||
├── Problem Category 1
|
||||
│ ├── Sub-problem
|
||||
│ └── Sub-problem
|
||||
├── Problem Category 2
|
||||
│ └── Potential Solutions
|
||||
└── Opportunities
|
||||
```
|
||||
|
||||
**The 10x Rule**
|
||||
- Don't improve by 10%
|
||||
- Aim for 10x better
|
||||
- Creates defensible advantage
|
||||
- Worth the effort to build
|
||||
|
||||
### Evaluating Ideas
|
||||
|
||||
Score your idea (1-10):
|
||||
|
||||
| Criteria | Score |
|
||||
|----------|-------|
|
||||
| Do you care about solving this? | ___ |
|
||||
| Is it a large market? | ___ |
|
||||
| Can this be built? | ___ |
|
||||
| Are you the right person? | ___ |
|
||||
| Is timing right? | ___ |
|
||||
| Is there existing demand? | ___ |
|
||||
|
||||
**Target**: 6+ average score to pursue further
|
||||
|
||||
## Market Research & Validation
|
||||
|
||||
### Understanding Your Market
|
||||
|
||||
**Total Addressable Market (TAM)**
|
||||
- Entire market size for your solution
|
||||
- If 1M businesses spend $1K/year = $1B TAM
|
||||
|
||||
**Serviceable Addressable Market (SAM)**
|
||||
- Realistic segment you can serve
|
||||
- Geographic or demographic focus
|
||||
|
||||
**Serviceable Obtainable Market (SOM)**
|
||||
- Revenue you can realistically capture
|
||||
- First 3-5 years typically
|
||||
|
||||
### Customer Discovery Interviews
|
||||
|
||||
**Process**:
|
||||
1. Find 20+ potential customers
|
||||
2. Ask open-ended questions
|
||||
3. Listen more than talk
|
||||
4. Identify patterns
|
||||
5. Document insights
|
||||
|
||||
**Example Questions**:
|
||||
- How do you currently solve this problem?
|
||||
- What's the biggest pain point?
|
||||
- What would ideal solution look like?
|
||||
- Would you pay for this? How much?
|
||||
- When would you need this?
|
||||
|
||||
### Validation Techniques
|
||||
|
||||
**Smoke Test**: Landing page with sign-ups
|
||||
**MVP**: Minimum viable product to test
|
||||
**Pre-sales**: Customers pay before launch
|
||||
**Pilot Program**: Small group uses product
|
||||
**Surveys**: Structured feedback collection
|
||||
|
||||
## Building Your Team
|
||||
|
||||
### Co-founder Selection
|
||||
|
||||
**Critical qualities:**
|
||||
- Complementary skills
|
||||
- Shared vision/values
|
||||
- Ability to disagree constructively
|
||||
- Commitment/reliability
|
||||
- Similar work ethic
|
||||
|
||||
**Common co-founder groups:**
|
||||
- School/university friends
|
||||
- Former colleagues
|
||||
- Online community connections
|
||||
- Customers becoming partners
|
||||
|
||||
### Hiring Early Team
|
||||
|
||||
**First hires:**
|
||||
1. **Technical co-founder or lead engineer**: Build product
|
||||
2. **Sales/customer person**: Get customers
|
||||
3. **Operations**: Keep things organized
|
||||
|
||||
**Hiring principles:**
|
||||
- Hire for attitude/culture fit
|
||||
- Train skills
|
||||
- Start part-time if possible
|
||||
- Use equity to bridge salary gap
|
||||
|
||||
### Equity Distribution
|
||||
|
||||
Typical equity splits:
|
||||
|
||||
```
|
||||
CEO/Founder 1: 33%
|
||||
CEO/Founder 2: 33%
|
||||
Early Engineer: 20%
|
||||
Advisor/Investor: 10-15%
|
||||
Employee Option Pool: 10-20%
|
||||
```
|
||||
|
||||
**Vesting**: 4 years with 1-year cliff (standard)
|
||||
|
||||
## Lean Startup Methodology
|
||||
|
||||
### Build-Measure-Learn Cycle
|
||||
|
||||
```
|
||||
Product Idea
|
||||
↓
|
||||
Build MVP (Minimum Viable Product)
|
||||
↓
|
||||
Measure (Gather data on usage)
|
||||
↓
|
||||
Learn (Analyze what you learned)
|
||||
↓
|
||||
Pivot or Persevere Decision
|
||||
↓
|
||||
Repeat (Until Product-Market Fit)
|
||||
```
|
||||
|
||||
### MVP Definition
|
||||
|
||||
**Minimum Viable Product**:
|
||||
- Core features only
|
||||
- Just enough to solve problem
|
||||
- Can be built/launched quickly
|
||||
- Gathers real user feedback
|
||||
|
||||
**MVP Examples**:
|
||||
- Landing page with pre-orders
|
||||
- Manual process (no automation)
|
||||
- Basic prototype
|
||||
- Limited geographic launch
|
||||
- Single use case focus
|
||||
|
||||
### Metrics to Track
|
||||
|
||||
**Actionable Metrics**:
|
||||
- Activation (users completing onboarding)
|
||||
- Retention (return usage rate)
|
||||
- Revenue (monthly recurring revenue)
|
||||
- Referral (organic growth rate)
|
||||
- Churn (percentage leaving)
|
||||
|
||||
**Avoid Vanity Metrics**:
|
||||
- Total users (may be inflated)
|
||||
- Downloads (doesn't indicate engagement)
|
||||
- Page views (low barrier)
|
||||
|
||||
## Fundraising Essentials
|
||||
|
||||
### Funding Stages
|
||||
|
||||
**Friends & Family** ($25K-$250K)
|
||||
- Early believers in you
|
||||
- Less formal
|
||||
- Demonstrate concept viability
|
||||
|
||||
**Seed Round** ($250K-$2M)
|
||||
- Angel investors or seed funds
|
||||
- Proof of concept needed
|
||||
- Build MVP and get users
|
||||
|
||||
**Series A** ($2M-$15M)
|
||||
- Early venture capital
|
||||
- Product-market fit shown
|
||||
- Ready to scale
|
||||
|
||||
**Series B+** ($15M+)
|
||||
- Growth and expansion
|
||||
- Proven business model
|
||||
- Path to profitability
|
||||
|
||||
### Building Your Pitch Deck
|
||||
|
||||
Essential slides:
|
||||
|
||||
1. **Title Slide**: Company, tagline
|
||||
2. **Problem**: What's broken?
|
||||
3. **Solution**: Your solution
|
||||
4. **Market**: TAM/SAM/SOM
|
||||
5. **Business Model**: How you make money
|
||||
6. **Traction**: Evidence it works
|
||||
7. **Team**: Who's building this?
|
||||
8. **Competition**: Who else is trying?
|
||||
9. **Financial Projections**: 5-year outlook
|
||||
10. **Ask**: How much you're raising
|
||||
|
||||
### Elevator Pitch
|
||||
|
||||
30-60 second summary:
|
||||
|
||||
```
|
||||
"We're building [solution] for [target customer]
|
||||
who [have this problem]. Unlike [existing solution],
|
||||
we [unique advantage]. We're looking for
|
||||
[funding amount] to [use of funds]."
|
||||
|
||||
Example:
|
||||
"We're building software for remote teams
|
||||
who struggle with asynchronous collaboration.
|
||||
Unlike Slack, we focus on deep work with AI-assisted
|
||||
summarization. We're raising $1M to expand our
|
||||
product and grow our team."
|
||||
```
|
||||
|
||||
## Growth & Scaling
|
||||
|
||||
### Growth Loops
|
||||
|
||||
Self-reinforcing systems that drive growth:
|
||||
|
||||
**Viral Loop**: User brings friends
|
||||
- Product value increases with users
|
||||
- Organic invite mechanism
|
||||
- Network effects
|
||||
|
||||
**Paid Loop**: Spend to acquire, monetize to reinvest
|
||||
- Cost to acquire customer: $100
|
||||
- Lifetime value per customer: $500
|
||||
- Reinvest to acquire more
|
||||
|
||||
**Content Loop**: Create value, attract customers
|
||||
- Publish useful content
|
||||
- Drive organic traffic
|
||||
- Convert some to customers
|
||||
|
||||
### Unit Economics
|
||||
|
||||
Key metrics for sustainable growth:
|
||||
|
||||
```
|
||||
Customer Acquisition Cost (CAC) = Marketing Spend / New Customers
|
||||
Lifetime Value (LTV) = Revenue per Customer × Customer Lifespan
|
||||
LTV:CAC Ratio = LTV / CAC (Target: 3:1 or better)
|
||||
|
||||
Monthly Churn Rate = Cancelled Users / Total Users
|
||||
Churn directly reduces LTV
|
||||
```
|
||||
|
||||
### Scaling Challenges
|
||||
|
||||
**Growing too fast**: Burn through cash, team quality suffers
|
||||
**Growing too slow**: Competitors catch up, runway depletes
|
||||
**Culture dilution**: Early team's values may not scale
|
||||
**Technical debt**: Quick builds need refactoring
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
### Top Reasons Startups Fail
|
||||
|
||||
1. **Wrong problem**: Solving non-existent or too-small problem
|
||||
2. **No market need**: Product doesn't address real pain
|
||||
3. **Ran out of money**: Poor cash management
|
||||
4. **Lost focus**: Trying to do too much
|
||||
5. **Bad team**: Wrong people for the challenge
|
||||
6. **Product issues**: Too complex, poorly designed
|
||||
7. **No business model**: Can't figure out monetization
|
||||
8. **Outcompeted**: Better-funded competitor arrives
|
||||
|
||||
### Red Flags to Avoid
|
||||
|
||||
- Not talking to customers regularly
|
||||
- Ignoring metrics/data
|
||||
- Founders who can't disagree constructively
|
||||
- Trying to build perfect product before launch
|
||||
- Pivoting too frequently
|
||||
- Spending excessively early
|
||||
- Not understanding your unit economics
|
||||
|
||||
## Conclusion
|
||||
|
||||
Starting a company is one of the most challenging and rewarding endeavors you can undertake. Success requires:
|
||||
|
||||
- **Persistence**: Most startups take 5-10 years to become successful
|
||||
- **Customer focus**: Always validate assumptions with real users
|
||||
- **Team**: Surround yourself with capable, trustworthy people
|
||||
- **Adaptability**: Be willing to pivot when data suggests you should
|
||||
- **Resilience**: Handle rejection and failure as learning opportunities
|
||||
|
||||
Study successful startup founders, learn from their experiences, and apply these principles to your own journey. The world needs more innovative solutions to important problems—you might be the one to build them.
|
||||
285
public/courses/ui-design-principles.md
Normal file
285
public/courses/ui-design-principles.md
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
# UI/UX Design Principles
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to UI/UX Design](#introduction)
|
||||
2. [Design Fundamentals](#fundamentals)
|
||||
3. [Color Theory & Palette](#color)
|
||||
4. [Typography](#typography)
|
||||
5. [Layout & Grid Systems](#layout)
|
||||
6. [User Testing & Research](#research)
|
||||
7. [Accessibility & Inclusive Design](#accessibility)
|
||||
8. [Practical Design Project](#project)
|
||||
|
||||
## Introduction to UI/UX Design
|
||||
|
||||
User Interface (UI) design focuses on the look and feel of digital products, while User Experience (UX) design focuses on how people interact with and feel about those products. Excellent design bridges both disciplines.
|
||||
|
||||
### Why Design Matters
|
||||
|
||||
- **First Impressions**: 94% of first impressions are design-related
|
||||
- **Conversion Rates**: Good design increases conversion by up to 200%
|
||||
- **Brand Identity**: Design communicates your brand values
|
||||
- **User Satisfaction**: Great UX leads to loyal users
|
||||
- **Accessibility**: Inclusive design serves everyone
|
||||
|
||||
### Design Thinking Process
|
||||
|
||||
The five-stage design thinking methodology:
|
||||
|
||||
1. **Empathize**: Understand your users
|
||||
2. **Define**: Clearly state the problem
|
||||
3. **Ideate**: Generate creative solutions
|
||||
4. **Prototype**: Build testable versions
|
||||
5. **Test**: Validate with real users
|
||||
|
||||
## Design Fundamentals
|
||||
|
||||
### Visual Hierarchy
|
||||
|
||||
Guiding user attention:
|
||||
|
||||
```
|
||||
Primary Elements (Largest, Brightest)
|
||||
↓
|
||||
Secondary Elements (Medium Size/Contrast)
|
||||
↓
|
||||
Tertiary Elements (Smallest, Least Important)
|
||||
```
|
||||
|
||||
Techniques for establishing hierarchy:
|
||||
|
||||
- **Size**: Larger elements draw attention first
|
||||
- **Color**: Bright colors stand out from muted ones
|
||||
- **Contrast**: Light on dark or vice versa
|
||||
- **Whitespace**: Surrounding space emphasizes importance
|
||||
- **Position**: Top-left is typically viewed first
|
||||
- **Typography**: Font weight and size create hierarchy
|
||||
|
||||
### Proximity & Alignment
|
||||
|
||||
Principles for organizing visual elements:
|
||||
|
||||
```
|
||||
Grouped Related Items (Proximity)
|
||||
↓
|
||||
Align to Grid (Alignment)
|
||||
↓
|
||||
Create Unified Layout
|
||||
```
|
||||
|
||||
### Contrast & Balance
|
||||
|
||||
Creating visual interest:
|
||||
|
||||
- **High Contrast**: More dramatic, modern feel
|
||||
- **Low Contrast**: Calming, sophisticated feel
|
||||
- **Symmetrical Balance**: Formal, stable feeling
|
||||
- **Asymmetrical Balance**: Dynamic, modern feeling
|
||||
|
||||
## Color Theory & Palette
|
||||
|
||||
### Color Psychology
|
||||
|
||||
Emotional associations with colors:
|
||||
|
||||
| Color | Emotions | Use Cases |
|
||||
|-------|----------|-----------|
|
||||
| Red | Energy, urgency, passion | CTAs, alerts, passion |
|
||||
| Blue | Trust, calm, stability | Finance, tech, healthcare |
|
||||
| Green | Growth, nature, balance | Eco, success, money |
|
||||
| Yellow | Happiness, optimism, warmth | Happy apps, energy |
|
||||
| Purple | Creativity, luxury, mystery | Premium, creative |
|
||||
| Orange | Enthusiasm, warmth, playful | Social, friendly, fun |
|
||||
| Black | Power, elegance, sophistication | Luxury, tech |
|
||||
| White | Purity, simplicity, cleanliness | Clean design, apps |
|
||||
|
||||
### Color Harmony
|
||||
|
||||
Techniques for choosing colors:
|
||||
|
||||
1. **Complementary**: Opposite colors (red & green)
|
||||
2. **Analogous**: Adjacent colors (blue, blue-green, green)
|
||||
3. **Triadic**: Three evenly-spaced colors
|
||||
4. **Monochromatic**: Variations of one color
|
||||
|
||||
### Accessibility in Color
|
||||
|
||||
- Avoid color as sole indicator (use patterns too)
|
||||
- Maintain sufficient contrast (4.5:1 minimum for text)
|
||||
- Consider colorblind users (7-10% of males)
|
||||
- Test designs in grayscale
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Selection
|
||||
|
||||
Types of typefaces:
|
||||
|
||||
- **Serif**: Traditional, trustworthy (Georgia, Times New Roman)
|
||||
- **Sans-serif**: Modern, clean (Arial, Helvetica, Roboto)
|
||||
- **Script**: Elegant, decorative (use sparingly)
|
||||
- **Monospace**: Technical, code-like (Courier, Fira Code)
|
||||
|
||||
Best practices:
|
||||
|
||||
- Use 1-2 font families maximum
|
||||
- Pair serif with sans-serif for contrast
|
||||
- Ensure sufficient size (minimum 16px for body text)
|
||||
- Maintain adequate line-height (1.4-1.6)
|
||||
|
||||
### Type Hierarchy
|
||||
|
||||
Creating readability structure:
|
||||
|
||||
```
|
||||
H1: 32-48px (Page titles)
|
||||
H2: 24-32px (Section headers)
|
||||
H3: 18-24px (Subsections)
|
||||
Body: 16px (Standard text)
|
||||
Small: 12-14px (Captions, hints)
|
||||
```
|
||||
|
||||
### Spacing & Leading
|
||||
|
||||
Managing text space:
|
||||
|
||||
- **Letter-spacing**: Distance between letters
|
||||
- **Word-spacing**: Distance between words
|
||||
- **Line-height**: Distance between lines (1.5x font size minimum)
|
||||
- **Paragraph spacing**: Space between paragraphs
|
||||
|
||||
## Layout & Grid Systems
|
||||
|
||||
### 12-Column Grid System
|
||||
|
||||
Foundation of modern responsive design:
|
||||
|
||||
```
|
||||
Full Width = 12 columns
|
||||
Large screens = Full width
|
||||
Tablets = 8 columns
|
||||
Mobile = 4 columns
|
||||
```
|
||||
|
||||
### Responsive Breakpoints
|
||||
|
||||
Standard device sizes:
|
||||
|
||||
```
|
||||
Mobile: 320px - 480px
|
||||
Tablet: 481px - 768px
|
||||
Desktop: 769px - 1024px
|
||||
Large Desktop: 1025px+
|
||||
```
|
||||
|
||||
### Common Layout Patterns
|
||||
|
||||
**Card Layout**: Information grouped in contained units
|
||||
**List View**: Items displayed in rows
|
||||
**Grid View**: Items in a multi-column grid
|
||||
**Magazine**: Mixed content sizes
|
||||
**Single Column**: Optimal for mobile reading
|
||||
|
||||
## User Testing & Research
|
||||
|
||||
### User Research Methods
|
||||
|
||||
**Qualitative Research** (Understanding Why)
|
||||
- User interviews
|
||||
- Focus groups
|
||||
- Contextual inquiry
|
||||
- Usability testing
|
||||
|
||||
**Quantitative Research** (Understanding What)
|
||||
- Surveys
|
||||
- Analytics
|
||||
- A/B testing
|
||||
- Heat mapping
|
||||
|
||||
### Usability Testing Process
|
||||
|
||||
1. **Recruit 5-8 participants** (often enough to find issues)
|
||||
2. **Create test scenarios** (realistic user tasks)
|
||||
3. **Observe interactions** (without guidance)
|
||||
4. **Collect feedback** (post-task interviews)
|
||||
5. **Analyze results** (identify patterns)
|
||||
6. **Iterate design** (implement improvements)
|
||||
|
||||
### Analytics Metrics
|
||||
|
||||
Key performance indicators:
|
||||
|
||||
- **Bounce Rate**: % of users leaving without interaction
|
||||
- **Conversion Rate**: % completing desired action
|
||||
- **Time on Page**: How long users stay
|
||||
- **Task Success Rate**: % completing assigned tasks
|
||||
- **Error Rate**: % encountering issues
|
||||
|
||||
## Accessibility & Inclusive Design
|
||||
|
||||
### WCAG Guidelines
|
||||
|
||||
Web Content Accessibility Guidelines ensure usable design for all:
|
||||
|
||||
**Perceivable**: Content must be visible/audible
|
||||
- Provide text alternatives for images
|
||||
- Don't rely on color alone
|
||||
- Ensure sufficient contrast (4.5:1)
|
||||
|
||||
**Operable**: Users can navigate and interact
|
||||
- Keyboard accessible (no mouse required)
|
||||
- Enough time to read/interact
|
||||
- Avoid seizure-inducing content
|
||||
|
||||
**Understandable**: Content is clear and predictable
|
||||
- Use clear language
|
||||
- Consistent navigation
|
||||
- Predict user actions
|
||||
|
||||
**Robust**: Compatible with assistive technologies
|
||||
- Valid HTML/CSS
|
||||
- Proper semantic structure
|
||||
- ARIA labels where needed
|
||||
|
||||
### Inclusive Design Checklist
|
||||
|
||||
- [ ] Images have descriptive alt text
|
||||
- [ ] Color contrast is sufficient
|
||||
- [ ] Keyboard navigation works
|
||||
- [ ] Focus indicators are visible
|
||||
- [ ] Forms have associated labels
|
||||
- [ ] Error messages are clear
|
||||
- [ ] Motion isn't excessive
|
||||
- [ ] Text is resizable
|
||||
- [ ] Touch targets are adequate (44x44px minimum)
|
||||
|
||||
## Practical Design Project
|
||||
|
||||
### Brief: E-commerce Product Page
|
||||
|
||||
**Objective**: Design a product page that converts visitors to buyers
|
||||
|
||||
**Requirements**:
|
||||
1. Display product image prominently
|
||||
2. Show product details (name, price, rating)
|
||||
3. Provide clear purchase option
|
||||
4. Include customer reviews
|
||||
5. Suggest related products
|
||||
6. Mobile responsive
|
||||
7. Accessible to all users
|
||||
|
||||
**Process**:
|
||||
|
||||
1. **Research**: Study competing products
|
||||
2. **Wireframe**: Low-fidelity layout
|
||||
3. **Prototype**: High-fidelity mockup
|
||||
4. **Test**: Get feedback from 5+ users
|
||||
5. **Iterate**: Refine based on feedback
|
||||
6. **Handoff**: Prepare for development
|
||||
|
||||
## Conclusion
|
||||
|
||||
Great design is about understanding users, making conscious choices, and continuously testing and iterating. These principles form the foundation for creating products people love using.
|
||||
|
||||
Practice these concepts on real projects, study great designs, and most importantly—listen to your users. That's where all good design starts.
|
||||
606
public/courses/web-dev-fundamentals.md
Normal file
606
public/courses/web-dev-fundamentals.md
Normal file
|
|
@ -0,0 +1,606 @@
|
|||
# Web Development Fundamentals
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Introduction to Web Development](#introduction)
|
||||
2. [HTML Essentials](#html-essentials)
|
||||
3. [CSS & Styling](#css-styling)
|
||||
4. [JavaScript Fundamentals](#javascript)
|
||||
5. [DOM Manipulation](#dom)
|
||||
6. [Responsive Design](#responsive)
|
||||
7. [Web Performance](#performance)
|
||||
8. [Modern Web Tools](#modern-tools)
|
||||
|
||||
## Introduction to Web Development
|
||||
|
||||
Web development is the process of building and maintaining websites. It encompasses everything from simple static pages to complex, interactive applications. This course covers the fundamental technologies that power the web.
|
||||
|
||||
### The Web Stack
|
||||
|
||||
Modern web development consists of three core technologies:
|
||||
|
||||
1. **HTML (HyperText Markup Language)**: Structure and content
|
||||
2. **CSS (Cascading Style Sheets)**: Styling and layout
|
||||
3. **JavaScript**: Interactivity and behavior
|
||||
|
||||
### How the Web Works
|
||||
|
||||
Understanding the request-response cycle:
|
||||
|
||||
```
|
||||
1. User enters URL in browser
|
||||
2. Browser makes HTTP request to server
|
||||
3. Server processes request
|
||||
4. Server sends HTML/CSS/JavaScript response
|
||||
5. Browser parses and renders content
|
||||
6. JavaScript executes for interactivity
|
||||
```
|
||||
|
||||
### Learning Path
|
||||
|
||||
This course progresses from basic HTML structure through CSS styling to JavaScript interactivity, covering the foundations you need to build modern websites.
|
||||
|
||||
## HTML Essentials
|
||||
|
||||
### Document Structure
|
||||
|
||||
Every HTML document follows a standard structure:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>Navigation</nav>
|
||||
</header>
|
||||
<main>
|
||||
<article>Content</article>
|
||||
</main>
|
||||
<footer>Footer</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Semantic HTML
|
||||
|
||||
Using semantic tags improves accessibility and SEO:
|
||||
|
||||
```html
|
||||
<!-- Good: Semantic HTML -->
|
||||
<article>
|
||||
<header>
|
||||
<h1>Article Title</h1>
|
||||
<time datetime="2024-01-15">January 15, 2024</time>
|
||||
</header>
|
||||
<section>
|
||||
<p>Article content here...</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>Written by Author Name</p>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<!-- Poor: Non-semantic -->
|
||||
<div class="article">
|
||||
<div class="header">
|
||||
<div class="title">Article Title</div>
|
||||
</div>
|
||||
<div class="content">Content</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Forms & Input
|
||||
|
||||
Creating interactive forms:
|
||||
|
||||
```html
|
||||
<form action="/submit" method="POST">
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" rows="4"></textarea>
|
||||
|
||||
<label for="subscribe">
|
||||
<input type="checkbox" id="subscribe" name="subscribe">
|
||||
Subscribe to newsletter
|
||||
</label>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Clear</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Media Elements
|
||||
|
||||
Embedding images, videos, and audio:
|
||||
|
||||
```html
|
||||
<!-- Images -->
|
||||
<img src="photo.jpg" alt="Description of photo" width="300" height="200">
|
||||
|
||||
<!-- Responsive images -->
|
||||
<picture>
|
||||
<source media="(min-width: 768px)" srcset="large.jpg">
|
||||
<source media="(min-width: 480px)" srcset="medium.jpg">
|
||||
<img src="small.jpg" alt="Responsive image">
|
||||
</picture>
|
||||
|
||||
<!-- Video -->
|
||||
<video width="320" height="240" controls>
|
||||
<source src="movie.mp4" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
<!-- Audio -->
|
||||
<audio controls>
|
||||
<source src="audio.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
```
|
||||
|
||||
## CSS & Styling
|
||||
|
||||
### Selectors & Specificity
|
||||
|
||||
Understanding CSS selector types:
|
||||
|
||||
```css
|
||||
/* Element selector */
|
||||
p { color: blue; }
|
||||
|
||||
/* Class selector */
|
||||
.highlight { background-color: yellow; }
|
||||
|
||||
/* ID selector */
|
||||
#main-title { font-size: 2em; }
|
||||
|
||||
/* Attribute selector */
|
||||
input[type="email"] { border: 2px solid blue; }
|
||||
|
||||
/* Pseudo-class selector */
|
||||
a:hover { color: red; }
|
||||
|
||||
/* Combinators */
|
||||
div > p { margin: 10px; } /* Child combinator */
|
||||
div p { margin: 10px; } /* Descendant combinator */
|
||||
h1 + p { margin-top: 0; } /* Adjacent sibling */
|
||||
h1 ~ p { line-height: 1.6; } /* General sibling */
|
||||
```
|
||||
|
||||
### Box Model
|
||||
|
||||
Understanding layout fundamentals:
|
||||
|
||||
```css
|
||||
.box {
|
||||
/* Content dimensions */
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
|
||||
/* Padding: inside the border */
|
||||
padding: 20px;
|
||||
|
||||
/* Border */
|
||||
border: 2px solid black;
|
||||
|
||||
/* Margin: outside the border */
|
||||
margin: 30px;
|
||||
|
||||
/* Box sizing */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
|
||||
### Flexbox Layout
|
||||
|
||||
Modern flexible layouts:
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row; /* row | column */
|
||||
justify-content: space-between; /* Main axis alignment */
|
||||
align-items: center; /* Cross axis alignment */
|
||||
gap: 20px; /* Space between items */
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1; /* Grow equally */
|
||||
flex-grow: 1; /* Growth factor */
|
||||
flex-shrink: 1; /* Shrink factor */
|
||||
flex-basis: auto; /* Base size */
|
||||
}
|
||||
```
|
||||
|
||||
### Grid Layout
|
||||
|
||||
Two-dimensional layouts:
|
||||
|
||||
```css
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 100px 200px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
```
|
||||
|
||||
### Transforms & Animations
|
||||
|
||||
Dynamic effects:
|
||||
|
||||
```css
|
||||
/* Transforms */
|
||||
.box {
|
||||
transform: translateX(50px) rotate(45deg) scale(1.2);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
transform: translateX(100px) rotate(90deg) scale(1.5);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animated {
|
||||
animation: slide-in 0.5s ease-out;
|
||||
}
|
||||
```
|
||||
|
||||
## JavaScript Fundamentals
|
||||
|
||||
### Variables & Data Types
|
||||
|
||||
JavaScript's type system:
|
||||
|
||||
```javascript
|
||||
// Variable declaration
|
||||
const name = "Alice"; // String
|
||||
let age = 30; // Number
|
||||
var isActive = true; // Boolean
|
||||
|
||||
// Arrays
|
||||
const colors = ["red", "green", "blue"];
|
||||
|
||||
// Objects
|
||||
const person = {
|
||||
name: "Alice",
|
||||
age: 30,
|
||||
greet: function() {
|
||||
console.log(`Hello, I'm ${this.name}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Template literals
|
||||
const message = `My name is ${person.name} and I'm ${person.age} years old`;
|
||||
```
|
||||
|
||||
### Functions
|
||||
|
||||
Defining and using functions:
|
||||
|
||||
```javascript
|
||||
// Function declaration
|
||||
function add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
// Function expression
|
||||
const multiply = function(a, b) {
|
||||
return a * b;
|
||||
};
|
||||
|
||||
// Arrow function
|
||||
const divide = (a, b) => a / b;
|
||||
|
||||
// Function with default parameters
|
||||
function greet(name = "Guest") {
|
||||
console.log(`Hello, ${name}!`);
|
||||
}
|
||||
|
||||
// Higher-order function
|
||||
function compose(f, g) {
|
||||
return (x) => f(g(x));
|
||||
}
|
||||
```
|
||||
|
||||
### Control Flow
|
||||
|
||||
Decision making and loops:
|
||||
|
||||
```javascript
|
||||
// If/else statements
|
||||
if (age >= 18) {
|
||||
console.log("Adult");
|
||||
} else if (age >= 13) {
|
||||
console.log("Teenager");
|
||||
} else {
|
||||
console.log("Child");
|
||||
}
|
||||
|
||||
// Switch statement
|
||||
switch (day) {
|
||||
case "Monday":
|
||||
console.log("Start of week");
|
||||
break;
|
||||
case "Friday":
|
||||
console.log("Almost weekend");
|
||||
break;
|
||||
default:
|
||||
console.log("Regular day");
|
||||
}
|
||||
|
||||
// Loops
|
||||
for (let i = 0; i < 5; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
// Array iteration
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
numbers.forEach((num) => console.log(num * 2));
|
||||
|
||||
// Map, filter, reduce
|
||||
const doubled = numbers.map((n) => n * 2);
|
||||
const evens = numbers.filter((n) => n % 2 === 0);
|
||||
const sum = numbers.reduce((acc, n) => acc + n, 0);
|
||||
```
|
||||
|
||||
### Async JavaScript
|
||||
|
||||
Handling asynchronous operations:
|
||||
|
||||
```javascript
|
||||
// Promises
|
||||
const fetchData = new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve("Data loaded");
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
fetchData
|
||||
.then((data) => console.log(data))
|
||||
.catch((error) => console.error(error));
|
||||
|
||||
// Async/await
|
||||
async function loadData() {
|
||||
try {
|
||||
const response = await fetch("/api/data");
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch API
|
||||
fetch("/api/users")
|
||||
.then((response) => response.json())
|
||||
.then((data) => console.log(data))
|
||||
.catch((error) => console.error(error));
|
||||
```
|
||||
|
||||
## DOM Manipulation
|
||||
|
||||
### Selecting Elements
|
||||
|
||||
Finding DOM elements:
|
||||
|
||||
```javascript
|
||||
// By ID
|
||||
const header = document.getElementById("main-header");
|
||||
|
||||
// By class
|
||||
const buttons = document.querySelectorAll(".btn");
|
||||
|
||||
// By tag
|
||||
const paragraphs = document.getElementsByTagName("p");
|
||||
|
||||
// Modern way (recommended)
|
||||
const container = document.querySelector(".container");
|
||||
const items = document.querySelectorAll(".item");
|
||||
```
|
||||
|
||||
### Creating & Modifying Elements
|
||||
|
||||
Dynamic DOM changes:
|
||||
|
||||
```javascript
|
||||
// Create elements
|
||||
const newDiv = document.createElement("div");
|
||||
newDiv.textContent = "Hello, World!";
|
||||
newDiv.className = "greeting";
|
||||
|
||||
// Add to DOM
|
||||
document.body.appendChild(newDiv);
|
||||
|
||||
// Modify content
|
||||
element.textContent = "New text";
|
||||
element.innerHTML = "<p>HTML content</p>";
|
||||
|
||||
// Modify attributes
|
||||
element.setAttribute("data-id", "123");
|
||||
element.removeAttribute("disabled");
|
||||
|
||||
// Modify classes
|
||||
element.classList.add("active");
|
||||
element.classList.remove("inactive");
|
||||
element.classList.toggle("highlighted");
|
||||
```
|
||||
|
||||
### Event Handling
|
||||
|
||||
Responding to user interactions:
|
||||
|
||||
```javascript
|
||||
// Add event listeners
|
||||
button.addEventListener("click", function(event) {
|
||||
console.log("Button clicked");
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Common events
|
||||
element.addEventListener("change", handleChange);
|
||||
input.addEventListener("input", handleInput);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
document.addEventListener("keydown", handleKeyPress);
|
||||
|
||||
// Event delegation
|
||||
container.addEventListener("click", function(event) {
|
||||
if (event.target.matches(".item")) {
|
||||
console.log("Item clicked:", event.target);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### Media Queries
|
||||
|
||||
Adapting to different screen sizes:
|
||||
|
||||
```css
|
||||
/* Mobile first approach */
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large screens */
|
||||
@media (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Viewport Meta Tag
|
||||
|
||||
Essential for mobile optimization:
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
```
|
||||
|
||||
### Mobile-Friendly Images
|
||||
|
||||
Responsive images for all screen sizes:
|
||||
|
||||
```html
|
||||
<img
|
||||
srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w"
|
||||
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
|
||||
src="medium.jpg"
|
||||
alt="Responsive image"
|
||||
>
|
||||
```
|
||||
|
||||
## Web Performance
|
||||
|
||||
### Optimization Techniques
|
||||
|
||||
Improving loading speed:
|
||||
|
||||
```javascript
|
||||
// Lazy loading images
|
||||
const images = document.querySelectorAll("img[data-src]");
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.removeAttribute("data-src");
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach((img) => imageObserver.observe(img));
|
||||
```
|
||||
|
||||
### Caching Strategies
|
||||
|
||||
Browser caching headers:
|
||||
|
||||
```
|
||||
Cache-Control: public, max-age=31536000 (1 year for static assets)
|
||||
Cache-Control: no-cache, must-revalidate (for HTML)
|
||||
Cache-Control: max-age=3600 (1 hour for API responses)
|
||||
```
|
||||
|
||||
## Modern Web Tools
|
||||
|
||||
### Build Tools
|
||||
|
||||
Essential development tools:
|
||||
|
||||
- **Package managers**: npm, yarn, pnpm
|
||||
- **Bundlers**: Webpack, Vite, Esbuild
|
||||
- **Task runners**: npm scripts, Gulp
|
||||
- **Linters**: ESLint, Stylelint
|
||||
- **Testing**: Jest, Vitest, Cypress
|
||||
|
||||
### Development Workflow
|
||||
|
||||
```bash
|
||||
# Initialize project
|
||||
npm init
|
||||
|
||||
# Install dependencies
|
||||
npm install express axios
|
||||
|
||||
# Run development server
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Run tests
|
||||
npm test
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
You now have a solid foundation in web development. Practice these concepts by building real projects, and gradually increase in complexity. The web development landscape continues to evolve, so keep learning and stay updated with new technologies and best practices.
|
||||
Loading…
Reference in a new issue