DevWeb

Repository for learning web development and practicing various web technologies.

📚 Learning Projects

Fundamentals

• Hello World - Basic introduction to HTML, CSS and JavaScript
  • Technologies: HTML5, CSS3, JavaScript

Web Development Exercises

• List 1 - Progressive exercises covering web development concepts

  • Technologies: HTML5, CSS3, JavaScript, Web APIs

  • Categories and exercises:

    CSS Layouts & Design

    • Exercise 1: Responsive Layout Implementation
      • Three different layout approaches: Float, Flexbox, and Grid
      • Responsive design principles
      • Semantic HTML structure

    Web Applications

    • Exercise 2: Todo List Application

      • LocalStorage for data persistence
      • Dark/Light theme switching
      • WCAG accessibility compliance
      • Filter and search functionality

    • Exercise 4: Photo Location App

      • Camera API integration
      • Geolocation features
      • CRUD operations with LocalStorage
      • Interactive maps integration

    • Exercise 5: Personal Portfolio SPA

      • Single Page Application architecture
      • History API for navigation
      • Responsive contact form
      • Theme customization

    Interactive Features

    • Exercise 3: Dynamic Image Gallery

      • Integration with Picsum.photos API
      • Image download and sharing features
      • Responsive grid layout
      • Accessibility optimizations

    • Exercise 7: Interactive Quiz Game

      • Dynamic question loading
      • Timer functionality
      • Score tracking
      • Audio integration
      • Difficulty levels

    E-commerce

    • Exercise 6: Computer Store
      • Product catalog with filtering
      • Shopping cart functionality
      • Checkout process
      • Responsive product gallery
      • WCAG accessibility features

    Web Scraping

    • Exercise 8: Faculty Directory
      • Web scraping implementation
      • Search functionality
      • Data export features
      • Loading state management

🚀 Main Projects

Recipes API

A REST API for managing recipes

• Technologies:
  • Node.js
  • Express.js
  • JavaScript
• Features:
  • CRUD operations for recipes
  • Data persistence
  • RESTful endpoints

Stock Monitor

Full-stack application for stock monitoring in real time

• Technologies:
  • Frontend: HTML5, CSS3, JavaScript (Vanilla)
  • Backend: Node.js, Express.js
  • Real-time: WebSocket (ws), Server-Sent Events, HTTP Polling
• Features:
  • Real-time monitoring via three simultaneous methods
  • Interactive dashboard with low-stock indicators
  • Automatic updates with intelligent reconnection
  • Simulation of sales and stock updates
  • Responsive interface with modern layout

Todo List

Containerized todo list application

• Technologies:
  • Python/Flask
  • Docker
  • PostgreSQL
  • Nginx
  • Redis
• Features:
  • Task management
  • Containerized deployment
  • Database persistence
  • Load balancing with Nginx
  • Redis caching

🛠 Infrastructure

Web Servers Seminar

Documentation and configuration for web servers

• Focus on Nginx configuration and deployment
• Includes:
  • Dockerfile configurations
  • SSL setup
  • Load balancing
  • Health checks
  • Server configurations

🔧 Setup & Usage

Each project contains its own documentation with specific setup instructions. For containerized applications (Todo List), make sure you have Docker and Docker Compose installed.

📝 License

This project is licensed under the terms specified in the LICENSE file.