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 Simple Web 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.
You can read updated version on bhnmzm.com
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 6 developed projects that you can review now.
- Web Chat App
- Custom Video Player
- Lovely Movies
- Note App
- Othello Board Game
- Quiz App
- Simple Range Slider
Web Chat App (View Online)
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
Custom Video Player (View Online)
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 (View Online)
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 (View Online)
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 (View Online)
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 (View Online)
Simulating a quiz in a web app.
Special topics covered:
- Object-Oriented Programming (OOP)
- Creating and handling DOM elements
- CSS animation
Simple Range Slider (View Online)
A simple implementation of a small range slider with pure Javascript.
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.
Top comments (2)
Hey love the projects :)
Thanks for your notice.