Collection of Practical Front-End Projects
A few months ago, I decided to work on a collection of simple and practical projects to educate in my courses, and share it publicly. Then I started and the result came up as a Github repo, named Practical Front-End Projects.
As the name implies, a collection of simple web projects developed for enthusiasts and beginners. The main purpose is education and all the codes are open for everyone that needs it.
Updated at 13 Apr 2020:
- New Project Added: Canvas Wallpaper and Split Screen Design
Notes:
- Webpack, gulp or another bundler was not used.
- Third-party libraries were not used.
- Codes only supported by modern browsers.
- Projects just are for educational purposes.
Projects
There are 9 developed projects that you can review now.
- Custom Video Player
- Lovely Movies
- Note App
- Othello Board Game
- Quiz App
- Simple Range Slider
- Web Chat App
- Canvas Wallpaper
- Split Screen
Split Screen
A modern design concept to showcase content in a container with two splitted sections that will resize on mouseover. (Online Demo)
Special topics covered:
- CSS variable
- CSS relative and absolute positioning
- CSS, use of pseudo-classes
- DOM manipulation
Canvas Wallpaper
This is a practical canvas tutorial, an animated wallpaper with circles that moves on it. The code is fully documented and easy to read. (Online Demo)
Special topics covered:
- HTML Canvas
- Coding strategies
- Mathematical operations
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. (View Online)
Special topics covered:
- Web Components
- Object-Oriented Programming
- Event handling
- DOM controlling
- CSS flex
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. (View Online)
Special topics covered:
- Video node controls
- Fullscreen handling
- CSS variables
Lovely Movies
A simple movie search website. (View Online)
Special topics covered:
- Promises and Fetch data with API (I used OMDb API)
- Control DOM behaviors and events
- Usage of
position: static;in CSS - Using CSS variables
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. (View Online)
Special topics covered:
- Object-Oriented Programming (OOP)
- Creating DOM elements
- Layouting with CSS grid system
Othello Board Game
Famous strategy game Othello, known as Reversi, implemented in pure Javascript. (View Online)
Special topics covered:
- Object-Oriented Programming (OOP)
- Othello game strategy
- Creating DOM elements
- Event handling
- Error handling
Quiz App
Simulating a quiz in the web app. (View Online)
Special topics covered:
- Object-Oriented Programming (OOP)
- Creating and handling DOM elements
- CSS animation
- Using Symbols
Simple Range Slider
A simple implementation of a small range slider with pure Javascript. (View Online)
Special topics covered:
- Prototypal Object-Oriented Programming
- DOM events handling
- CSS variables
Running locally
It’s so simple. Clone or download the repository, open project directory and click index.html. As I mentioned above, there is not any bundler and all scripts have been injected in the HTML.
New projects are being prepared
I try to make this repo very useful. So, I really looking forward to your help and your criticism.