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 - Lovely Movies - Note App - Othello Board Game - Quiz App - Simple Range Slider - Web Chat App - Canvas Wallpaper - Split Screen - Escape Loading Animation

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

Special topics covered:

• Video node controls
• Fullscreen handling
• CSS variables

Lovely Movies

A simple movie search website.

Online Demo

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

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

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

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

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

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

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

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.

Online Demo

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