Front-End-Projects

KO | EN

gitlite — search

#react #typescript #llm #machine-learning #macos #nodejs #windows #cli #kubernetes #vue #pytorch #security #openai #open-source

Front-End-Projects

(★ 17)

No description available.

Front-End-Projects Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

Front-End-Projects

Front-End-Projects Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Front-End-Projects

Front-End-Projects Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README