Web Development Projects

A collection of web development projects and experiments, including UI clones, interactive widgets, and utility tools.

📚 Table of Contents

• Overview
• Projects
• Getting Started
• Project Structure
• Technologies Used
• Contributing
• License

Overview

This repository contains various web development projects I've created while learning HTML, CSS, and JavaScript. Each project demonstrates different concepts and techniques.

Projects

1. ChatGPT Clone 🤖

Location: chatgpt clone/

A UI clone of ChatGPT's interface with:

• Responsive design
• Chat-like message interface
• Animated elements
• Modern dark theme

Features:

• Clean, minimal UI
• Text input area
• Message display area
• Icon buttons

2. Countdown Timer ⏱️

Location: countdown/

An animated countdown timer with:

• Sliding number animation
• Hours, minutes, seconds display
• Real-time clock sync
• Smooth CSS transitions

Features:

• Automatic time synchronization
• Smooth sliding animations
• Responsive design
• Modern styling

3. Facebook Clone 👥

Location: facebok clons/facebook posts/

A Facebook-like post interface with:

• Post cards
• Like/comment buttons
• User avatars
• Social media styling

4. Message Chat Clone 💬

Location: message chat clone/

A messaging app interface with:

• Chat bubbles
• Input area
• Send functionality
• Mobile-responsive design

5. Multi-Select Component 📋

Location: multi-select in javaScript/

A custom multi-select dropdown component:

• Multiple selection support
• Custom styling
• Keyboard navigation
• Dynamic options

6. Snake Game 🐍

Location: snake game console/

A browser-based snake game:

• Grid-based movement
• Score tracking
• Keyboard controls
• Collision detection

7. Python Utilities 🐍

Location: python files & libraries/

Python utility scripts for:

• File management
• Encryption
• Random data generation

Getting Started

Prerequisites

• Web Browser: Chrome, Firefox, Safari, or Edge
• Text Editor: VS Code, Sublime Text, or any editor
• Python (for Python utilities): Python 3.7+

Installation

# Clone the repository
git clone https://github.com/Ibrahimibrahimi/Web-Dev.git
cd Web-Dev

Running Projects

HTML/CSS/JS Projects

Simply open the index.html file in your browser:

# Using Python's built-in server
cd "chatgpt clone"
python -m http.server 8000
# Open http://localhost:8000

# Or directly open in browser
open index.html  # macOS
xdg-open index.html  # Linux
start index.html  # Windows

Python Utilities

cd "python files & libraries"
python main.py

Project Structure

Web-Dev/
├── README.md                              # This file
├── LICENSE                                # MIT License
│
├── chatgpt clone/                         # ChatGPT UI Clone
│   ├── index.html                        # Main HTML
│   ├── index.css                         # Styles
│   └── index.js                          # Functionality
│
├── countdown/                             # Countdown Timer
│   ├── index.html                        # Main HTML
│   └── index.css                         # Styles
│
├── facebok clons/                         # Facebook Clone
│   └── facebook posts/
│       ├── index.html                    # Main HTML
│       └── index.css                     # Styles
│
├── message chat clone/                    # Message Chat Clone
│   ├── index.html                        # Main HTML
│   ├── index.css                         # Styles
│   └── index.js                          # Functionality
│
├── multi-select in javaScript/            # Multi-Select Component
│   ├── index.html                        # Main HTML
│   ├── index.css                         # Styles
│   └── index.js                          # Functionality
│
├── snake game console/                    # Snake Game
│   ├── index.html                        # Main HTML
│   ├── index.css                         # Styles
│   └── index.js                          # Game Logic
│
└── python files & libraries/              # Python Utilities
    ├── main.py                           # Main script
    ├── fileManager.py                    # File operations
    ├── encryptor.py                      # Encryption utilities
    └── randomise.py                      # Random data generation

Technologies Used

Frontend

• HTML5: Semantic markup
• CSS3: Flexbox, Grid, Animations, Transitions
• JavaScript: ES6+, DOM manipulation, Event handling

Python

• File I/O: Reading/writing files
• Cryptography: Basic encryption
• Random: Data generation

Examples

ChatGPT Clone UI

<!-- Basic structure -->
<div class="container">
    <div class="main">
        <div class="ask-help">
            <span>How can I help you?</span>
        </div>
    </div>
    <div class="bottom">
        <textarea id="input" placeholder="Ask anything..."></textarea>
    </div>
</div>

Countdown Timer CSS

/* Sliding animation */
.slide {
    transition: transform 0.3s ease-out;
}

.slide span {
    display: block;
    height: 50px;
    line-height: 50px;
}

Multi-Select JavaScript

// Custom multi-select component
class MultiSelect {
    constructor(element) {
        this.element = element;
        this.selected = [];
        this.init();
    }
    
    init() {
        // Event listeners and initialization
    }
    
    toggleOption(option) {
        // Toggle selection
    }
}

Features by Project

Project	Responsive	Animated	Interactive	Mobile-Ready
ChatGPT Clone	✅	✅	✅	✅
Countdown	✅	✅	❌	✅
Facebook Clone	✅	❌	✅	✅
Message Chat	✅	❌	✅	✅
Multi-Select	✅	❌	✅	✅
Snake Game	✅	❌	✅	⚠️

Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Ibrahim Ibrahim - GitHub

---

⭐ If you find these projects helpful, please give them a star!