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

Welcome to the Practical Front-End Projects repository! This collection offers a range of practical and user-friendly projects for front-end enthusiasts and beginners. The primary objective of this repository is to facilitate learning. All the code samples provided are free and will always remain so.

Key Features

• No Bundlers: The projects in this repository have been developed without the use of bundlers like Webpack or Gulp. This allows you to focus on the core front-end concepts and techniques, without getting tangled in the complexities of build tools.

• No Third-Party Libraries: The projects showcased here do not rely on any third-party libraries. By using pure Javascript, CSS, and HTML, you'll gain a deeper understanding of the fundamentals of front-end development.

• Modern Browser Support: The code samples provided in this repository are designed to be compatible with modern browsers. This ensures that you can apply the knowledge gained from these projects to real-world scenarios with confidence.

Educational Purpose

Please note that the projects included in this repository are intended solely for educational purposes. They serve as valuable learning resources to strengthen your front-end development skills. However, keep in mind that they may not be optimized for production environments or feature advanced functionalities.

We hope you find these practical front-end projects helpful and enjoyable as you embark on your journey to becoming a proficient front-end developer. Happy coding!

Projects

There are 10 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
• Image Slider 3D

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

Image Slider 3D

It is an image slider with 3D animation that changes slides automatically based on a duration time. By hovering the mouse on slides, the animation will be paused.

Online Demo

Special topics covered:

• Adding data to the slider by map method
• CSS
  • Keyframe animation with 3D effect
  • Making dynamic animation keyframe
  • Handling dynamic animation timing

Running Locally

Running the projects locally is a breeze. Just follow these simple steps:

1. Clone or download the repository to your local machine.
2. Open the project directory.
3. Launch the index.html file in your preferred browser.

Since there are no bundlers used in this repository, all scripts have been directly injected into the HTML files. This allows for a straightforward setup and easy execution of the projects.

New Projects in the Pipeline

We are working on adding new projects to this repository. Your input and feedback are highly appreciated, as they help us improve the repository and enhance its usefulness.

We eagerly look forward to your contributions, suggestions, and comments to make this repository a thriving hub of practical front-end projects. Together, we can create an exceptional resource for aspiring developers.

Contribute

We warmly welcome contributions to this project! As it is specifically designed for beginners and serves educational purposes, we encourage you to contribute by suggesting useful changes or even submitting new projects. Don't hesitate, even if it's your first time contributing to an open-source project!

Here's a simple guide on how you can get involved:

1. Fork the repository: Start by forking the repository to your GitHub account. This will create a copy of the project under your account, allowing you to make changes.

2. Make your changes: Create a new branch in your forked repository and make the desired changes. You can suggest improvements, fix bugs, add new features, or even introduce entirely new projects that align with the educational focus.

3. Submit a pull request: Once you are satisfied with your changes, submit a pull request on this repository. This will notify the project maintainers about your proposed changes. We will review your submission, provide feedback, and collaborate with you to ensure the quality and relevance of your contribution.

Remember, this is a friendly and inclusive community. We appreciate all contributions, regardless of your level of experience. Feel free to ask questions and seek guidance along the way.

Thank you for your interest in making this repository even better. Together, we can create an invaluable resource for beginners in the world of front-end development!