Become a Full-Stack
Complete Developer

/* CSS variables for consistency */
:root {
    --primary: #8b5cf6;
    --secondary: #ec4899;
    --dark: #1e1b4b;
}

/* Modern layout with Flexbox */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--dark), #312e81);
}

/* Card with modern effects */
.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
}

// Modern arrow function
const greet = (name) => `Hello, ${name}!`;

// Select element and event listener
const button = document.querySelector('.btn');
const output = document.querySelector('.output');

button.addEventListener('click', () => {
    const name = document.querySelector('#name').value;
    output.textContent = greet(name);
    output.classList.add('animate');
});

// Fetch API for external data
async function getUsers() {
    const response = await fetch('/api/users');
    const users = await response.json();
    return users;
}

// Modern array methods
const numbers = [1, 2, 3, 4, 5];
const doubles = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

# Python class with OOP
class Student:
    def __init__(self, name, age):
        self.name = name
        self.age = age
        self.grades = []
    
    def add_grade(self, grade):
        self.grades.append(grade)
    
    def average(self):
        return sum(self.grades) / len(self.grades) if self.grades else 0
    
    def __str__(self):
        return f"{self.name} ({self.age} years) - Average: {self.average():.2f}"

# List comprehension
squares = [x**2 for x in range(1, 11)]
evens = [x for x in range(20) if x % 2 == 0]

# Flask - simple web app
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/greet/<name>')
def greet(name):
    return jsonify({"message": f"Hello, {name}!"})