https://github.com/saahiyo/edu-blink
A modern educational website designed to provide online learning resources and courses. This project was created as part of a college assignment to learn and practice web development skills.
https://github.com/saahiyo/edu-blink
educational-project html5 htmlcss-project website
Last synced: 7 months ago
JSON representation
A modern educational website designed to provide online learning resources and courses. This project was created as part of a college assignment to learn and practice web development skills.
- Host: GitHub
- URL: https://github.com/saahiyo/edu-blink
- Owner: saahiyo
- Created: 2024-11-20T15:35:22.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-11-21T10:50:22.000Z (11 months ago)
- Last Synced: 2025-01-24T15:29:06.467Z (9 months ago)
- Topics: educational-project, html5, htmlcss-project, website
- Language: HTML
- Homepage: https://saahiyo.github.io/Edu-Blink/
- Size: 2.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Edu-Blink
A modern educational website designed to provide online learning resources and courses. This project was created as part of a college assignment to learn and practice web development skills.
## Description
This website serves as a platform for educational content delivery, featuring a clean and user-friendly interface. It's built with HTML, CSS, and JavaScript, showcasing modern web development techniques including CSS animations and custom interactive elements. The project demonstrates the practical application of web development fundamentals learned during the course.
## Features
- Responsive course catalog
- Clean and modern UI
- Easy navigation
- Custom infinite scroll testimonials with hover pause
- Interactive cursor effects
- Fade effects and smooth animations
## Technologies Used
- HTML5
- CSS3
- JavaScript (Vanilla)
- Modern CSS Features:
- CSS Animations
- Flexbox Layout
- CSS Gradients
- Pseudo-elements
- Transform and Transitions
## Setup
Simply clone the repository and open `index.html` in your web browser to view the website.
## Project Structure
```
courses project - final/
├── index.html # Main HTML file
├── style.css # Main stylesheet
├── script.js # JavaScript functionality
├── img/ # Image assets directory
│ ├── companies/ # Company logos
│ ├── courses/ # Course thumbnails
│ ├── instructor/ # Instructor images
│ └── testimonials/ # Student testimonial images
└── README.md # Project documentation
```
## Implementation Details
### Custom Features
1. **Infinite Scroll Testimonials**
- Pure CSS animation for smooth scrolling
- Hover pause functionality
- Edge fade effects using CSS gradients
- Dynamic content cloning via JavaScript
2. **Interactive Elements**
- Custom cursor following effect
- Smooth hover transitions
- Modern card designs with elevation effects
## Author
Created as a college project for learning web development fundamentals. This project helped in understanding:
- HTML structure and semantic markup
- Advanced CSS techniques and animations
- Vanilla JavaScript DOM manipulation
- Modern web design principles
- Performance optimization through native browser features