A collection of practical, easy to use front-end related projects for enthusiasts and beginners. The main purpose is to learn. The codes are free and always will be.
Notes:
- Webpack, gulp or any another bundler has not been used.
- Third-party libraries were not used.
- Codes are mostly supported by modern browsers.
- Projects are only for educational purposes.
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
- Escape Loading Animation
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.
Special topics covered:
- Video node controls
- Fullscreen handling
- CSS variables
A simple movie search website.
Special topics covered:
- Promises and Fetch data with API
- Control DOM behaviors and events
- Usage of
position: static;in CSS - Using CSS variables
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.
Special topics covered:
- Object Oriented Programming (OOP)
- Creating DOM elements
- Layouting with CSS grid system
- localStorage usage
Famous strategy game Othello, known as Reversi, implemented in pure Javascript.
Special topics covered:
- Object Oriented Programming (OOP)
- Othello game strategy
- Creating DOM elements
- Event handling
- Error handling
Simulating a quiz in web app.
Special topics covered:
- Object Oriented Programming (OOP)
- Creating and handling DOM elements
- CSS animation
A simple implementation of a small range slider with pure Javascript.
Special topics covered:
- Prototypal Object-Oriented Programming
- DOM events handling
- CSS variables
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.
Special topics covered:
- Web Components
- Object-Oriented Programming
- Event handling
- DOM controlling
- CSS flex
This is a practical canvas tutorial, a animated wallpaper with circles that moves on it. The code is full documented and easy to read.
Special topics covered:
- HTML Canvas
- Coding strategies
- Mathematical operations
A modern design concept to showcase content in a container with two splitted sections which will resize on mouse over
Special topics covered:
- CSS
- variable
- relative and absolute positioning
- use of pseudo classes
- JavaScript
- DOM manipulation
Cool loading animation with pure CSS. Animation contains sliding and floating boxes, designed by Vitaly Silkin.
Special topics covered:
- CSS
- Keyframe animations
- Transform and transform origin
It's so simple. Clone or download the repository, open project directory and open index.html in your browser. As I mentioned above, there is not any bundler and all scripts have been injected in the HTML.
I'll try to make this repo very useful. So, I really looking forward to your help and comments to make this better.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent