Collection of Simple Web Projects
Tags: webdev, javascript, css
Published: 2020-03-24 07:49:00

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](https://github.com/behnamazimi/practical-front-end-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](https://bhnmzm.com/blog/practival-front-end-projects)**

**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](#web-chat-app)
  - [Custom Video Player](#custom-video-player-view-online)
  - [Lovely Movies](#lovely-movies-view-online)
  - [Note App](#note-app-view-online)
  - [Othello Board Game](#othello-board-game-view-online)
  - [Quiz App](#quiz-app-view-online)
  - [Simple Range Slider](#simple-range-slider-view-online)

### Web Chat App ([View Online](https://behnamazimi.github.io/simple-web-projects/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

### Custom Video Player ([View Online](https://behnamazimi.github.io/simple-web-projects/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 ([View Online](https://behnamazimi.github.io/simple-web-projects/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 ([View Online](https://behnamazimi.github.io/simple-web-projects/notes-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 ([View Online](https://behnamazimi.github.io/simple-web-projects/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 ([View Online](https://behnamazimi.github.io/simple-web-projects/quiz-app/))

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](https://behnamazimi.github.io/simple-web-projects/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

### Running locally

It's so simple. [Clone or download](https://github.com/behnamazimi/practical-front-end-projects) 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.