KO
|
EN
gitlite — search
Search
#javascript
#python
#hacktoberfest
#react
#ai
#typescript
#llm
#go
#golang
#android
#machine-learning
#rust
#deep-learning
#linux
Front-End-Projects
★ 17
Open GitHub ↗
No description available.
Download README (.md)
Explore Similar Repositories
device_policy_manager
:
Query Android device Administrator (DevicePolicyManager)
8bidou-demo
:
TezTok 8bidou Demo
Fanatec-Pinout
:
Dokumentaion of Fanatec connectivity and pinouts for DIY purposes including examples.
LoGo-SSL
:
No description available.
reinforcement-learning-sf
:
No description available.
// repository documentation
Was this content helpful?
★ 0
(0 ratings)
Select Rating:
★
★
★
★
★
Submit Feedback
Recent Feedback
×
Download README
Do you want to download the
README.md
file for
Front-End-Projects
?
Download (.md)
# Front-End-Projects ## 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) - [Simple Portfolio](#simple-portfolio) ### 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://ashket980.github.io/Front-End-Projects/01.Custom_video_player/index.html)** **Special topics covered:** - Video node controls - Fullscreen handling - CSS variables ### Lovely Movies A simple movie search website. **[Online Demo](https://ashket980.github.io/Front-End-Projects/02.Lovely_movies/index.html)** **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://ashket980.github.io/Front-End-Projects/03.Notes_App/index.html)** **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://ashket980.github.io/Front-End-Projects/04.Othello_board_game/index.html)** **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://ashket980.github.io/Front-End-Projects/05.Quiz_app/index.html)** **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://ashket980.github.io/Front-End-Projects/06.Simle_range_slider/index.html)** **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://ashket980.github.io/Front-End-Projects/07.Web_chat_app/index.html)** **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://ashket980.github.io/Front-End-Projects/08.Canvas_Wallpaper/index.html)** **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://ashket980.github.io/Front-End-Projects/09.Split_screen/index.html)** **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, **[Online Demo](https://ashket980.github.io/Front-End-Projects/11.Css_Escape_Loading_Animation/index.html)** **Special topics covered:** - CSS - Keyframe animations - Transform and transform origin ------------------------------------------------------------------------------------------------------------------------------------------------------- #### 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.
