Practical Front-End Projects with Pure Javascript, CSS, and HTML
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.
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
- Escape Loading Animation
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.
Special topics covered:
- Video node controls
- Fullscreen handling
- CSS variables
Lovely Movies
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
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.
Special topics covered:
- Object Oriented Programming (OOP)
- Creating DOM elements
- Layouting with CSS grid system
- localStorage usage
Othello Board Game
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
Quiz App
Simulating a quiz in web app.
Special topics covered:
- Object Oriented Programming (OOP)
- Creating and handling DOM elements
- CSS animation
Simple Range Slider
A simple implementation of a small range slider with pure Javascript.
Special topics covered:
- Prototypal Object-Oriented Programming
- DOM events handling
- CSS variables
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.
Special topics covered:
- Web Components
- Object-Oriented Programming
- Event handling
- DOM controlling
- CSS flex
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.
Special topics covered:
- HTML Canvas
- Coding strategies
- Mathematical operations
Split Screen
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
Escape Loading Animation - CSS
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
Running locally
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.
New projects are being prepared
I'll try to make this repo very useful. So, I really looking forward to your help and comments to make this better.