Practical Front-End Projects with Pure Javascript, CSS, and HTML

Collection of practical, easy to use front-end related projects for enthusiasts and beginners. The primary purpose is to learn. The codes are free and always will be.

Hi there, I hope you all are in a good mood.

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.

As the name implies, 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

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

with and respects
NextJs,Vercel