Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/behnamazimi/practical-front-end-projects

Collection of practical front-end projects developed by pure JS, HTML, and CSS without any third-party libs and packages
https://github.com/behnamazimi/practical-front-end-projects

css free-project front-end html javascript learning

Last synced: about 16 hours ago
JSON representation

Collection of practical front-end projects developed by pure JS, HTML, and CSS without any third-party libs and packages

Awesome Lists containing this project

README 

          
# Practical Front-End Projects with Pure Javascript, CSS, and HTML



> Welcome to the Practical Front-End Projects repository!



> This repository contains a range of practical and user-friendly projects for front-end enthusiasts and beginners. The primary objective of this repository is to facilitate learning.



> All the code samples provided are free and will always remain so.



## Table of contents

1. [Key Features](#key-features)

2. [Educational Purpose](#Educational-Purpose)

3. [Projects](#Projects)

    - [Custom Video Player](#1-custom-video-player)

    - [Lovely Movies](#2-lovely-movies)

    - [Note App](#3-note-app)

    - [Othello Board Game](#4-othello-board-game)

    - [Quiz App](#5-quiz-app)

    - [Simple Range Slider](#6-simple-range-slider)

    - [Web Chat App](#7-web-chat-app)

    - [Canvas Wallpaper](#8-canvas-wallpaper)

    - [Split Screen](#9-split-screen)

    - [Escape Loading Animation](#10-escape-loading-animation---css)

    - [Image Slider 3D](#11-image-slider-3d)

4. [Running Locally](#Running-Locally)

5. [New Projects in the Pipeline](#New-Projects-in-the-Pipeline)

6. [Contribute](#Contribute)



## Key Features



- **No Bundlers**: The projects in this repository have been developed without the use of bundlers like Webpack or Gulp. This allows you to focus on the core front-end concepts and techniques, without getting tangled in the complexities of build tools.



- **No Third-Party Libraries**: The projects showcased here do not rely on any third-party libraries. By using pure Javascript, CSS, and HTML, you'll gain a deeper understanding of the fundamentals of front-end development.



- **Modern Browser Support**: The code samples provided in this repository are designed to be compatible with modern browsers. This ensures that you can apply the knowledge gained from these projects to real-world scenarios with confidence.



## Educational Purpose



Please note that the projects included in this repository are intended solely for educational purposes. They serve as valuable learning resources to strengthen your front-end development skills. However, keep in mind that they may not be optimized for production environments or feature advanced functionalities.



We hope you find these practical front-end projects helpful and enjoyable as you embark on your journey to becoming a proficient front-end developer. Happy coding!



## Projects

### 1. Custom Video Player 



In this project I customized the video controls and designed them manually. Focus on handling the video node and how to implement custom behavior for it.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/custom-video-player/)**



**Special topics covered:**



- Video node controls

- Fullscreen handling

- CSS variables



### 2. Lovely Movies 



A simple movie search website.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/lovely-movies/)**



**Special topics covered:**



- Promises and Fetch data with API

- Control DOM behaviors and events

- Usage of `position: static;` in CSS

- Using CSS variables



### 3. Note App 



A practical note web app to handle categorized notes. There are notes that can have a category for. you can search in notes and edit or remove those.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/notes-app/)**



**Special topics covered:**



- Object Oriented Programming (OOP)

- Creating DOM elements

- Layouting with CSS grid system

- localStorage usage



### 4. Othello Board Game 



Famous strategy game Othello, known as Reversi, implemented in pure Javascript.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/othello-board-game/)**



**Special topics covered:**



- Object Oriented Programming (OOP)

- Othello game strategy

- Creating DOM elements

- Event handling

- Error handling



### 5. Quiz App



Simulating a quiz in web app.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/quiz-app/)**



**Special topics covered:**



- Object Oriented Programming (OOP)

- Creating and handling DOM elements

- CSS animation



### 6. Simple Range Slider 



A simple implementation of a small range slider with pure Javascript.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/simple-range-slider/)**



**Special topics covered:**



- Prototypal Object-Oriented Programming

- DOM events handling

- CSS variables



### 7. Web Chat App 



This project is a real messaging app that developed with pure javascript without third-party libs. We focused on the Web Components in this project and give it a real component structure. All chats, messages, data are fake and generated with a data-factory. I hope It would be useful.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/web-chat-app/)**



**Special topics covered:**



- Web Components

- Object-Oriented Programming

- Event handling

- DOM controlling

- CSS flex



### 8. Canvas Wallpaper 



This is a practical canvas tutorial, a animated wallpaper with circles that moves on it. The code is full documented and easy to read.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/canvas-wallpaper/)**



**Special topics covered:**



- HTML Canvas

- Coding strategies

- Mathematical operations



### 9. Split Screen



A modern design concept to showcase content in a container with two splitted sections which will resize on mouse over



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/split-screen/)**



**Special topics covered:**



- CSS

  - variable

  - relative and absolute positioning

  - use of pseudo classes

- JavaScript

  - DOM manipulation

  

### 10. Escape Loading Animation - CSS



Cool loading animation with pure CSS. Animation contains sliding and floating boxes, designed by [Vitaly Silkin](https://dribbble.com/shots/4268258-Evitare-loader).



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/css-escape-loading-animation/)**



**Special topics covered:**



- CSS

  - Keyframe animations

  - Transform and transform origin



### 11. Image Slider 3D 



It is an image slider with 3D animation that changes slides automatically based on a duration time. By hovering the mouse on slides, the animation will be paused.



**[Online Demo](https://behnamazimi.github.io/simple-web-projects/image-slider-3d/)**



**Special topics covered:**



- Adding data to the slider by map method

- CSS

  - Keyframe animation with 3D effect

  - Making dynamic animation keyframe 

  - Handling dynamic animation timing 



## Running Locally



Running the projects locally is a breeze. Just follow these simple steps:



1. Clone or download the repository to your local machine.

2. Open the project directory.

3. Launch the `index.html` file in your preferred browser.



Since there are no bundlers used in this repository, all scripts have been directly injected into the HTML files. This allows for a straightforward setup and easy execution of the projects.



## New Projects in the Pipeline



We are working on adding new projects to this repository. Your input and feedback are highly appreciated, as they help us improve the repository and enhance its usefulness.



We eagerly look forward to your contributions, suggestions, and comments to make this repository a thriving hub of practical front-end projects. Together, we can create an exceptional resource for aspiring developers.



## Contribute



We warmly welcome contributions to this project! As it is specifically designed for beginners and serves educational purposes, we encourage you to contribute by suggesting useful changes or even submitting new projects. Don't hesitate, even if it's your first time contributing to an open-source project!



Here's a simple guide on how you can get involved:



1. **Fork the repository**: Start by forking the repository to your GitHub account. This will create a copy of the project under your account, allowing you to make changes.



2. **Make your changes**: Create a new branch in your forked repository and make the desired changes. You can suggest improvements, fix bugs, add new features, or even introduce entirely new projects that align with the educational focus.



3. **Submit a pull request**: Once you are satisfied with your changes, submit a pull request on this repository. This will notify the project maintainers about your proposed changes. We will review your submission, provide feedback, and collaborate with you to ensure the quality and relevance of your contribution.



> Remember, this is a friendly and inclusive community. We appreciate all contributions, regardless of your level of experience. Feel free to ask questions and seek guidance along the way. 



Thank you for your interest in making this repository even better. Together, we can create an invaluable resource for beginners in the world of front-end development!