Welcome to the Practical Front-End Projects repository!
This repository contains 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.
-
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.
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!
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
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
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
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
Simulating a quiz in web app.
Special topics covered:
- Object Oriented Programming (OOP)
- Creating and handling DOM elements
- CSS animation
A simple implementation of a small range slider with pure Javascript.
Special topics covered:
- Prototypal Object-Oriented Programming
- DOM events handling
- CSS variables
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
This is a practical canvas tutorial, a animated wallpaper with circles that moves on it. The code is full documented and easy to read.
Special topics covered:
- HTML Canvas
- Coding strategies
- Mathematical operations
A modern design concept to showcase content in a container with two splitted sections which will resize on mouse over
Special topics covered:
- CSS
- variable
- relative and absolute positioning
- use of pseudo classes
- JavaScript
- DOM manipulation
Cool loading animation with pure CSS. Animation contains sliding and floating boxes, designed by Vitaly Silkin.
Special topics covered:
- CSS
- Keyframe animations
- Transform and transform origin
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.
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 the projects locally is a breeze. Just follow these simple steps:
- Clone or download the repository to your local machine.
- Open the project directory.
- Launch the
index.htmlfile 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.
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.
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:
-
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.
-
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.
-
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!
