Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/monamobeen/datastore


https://github.com/monamobeen/datastore

Last synced: 3 days ago
JSON representation

Awesome Lists containing this project

README 

        
## 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](#custom-video-player)

  - [Lovely Movies](#lovely-movies)

  - [Note App](#note-app)

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

  - [Quiz App](#quiz-app)

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

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

  - [Canvas Wallpaper](#canvas-wallpaper)

  - [Split Screen](#split-screen)

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



### 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



### 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



### 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



### 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



### 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



### 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



### 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



### 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



### 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

  

### 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



### 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.