https://github.com/thekiranmahajan/ansrsource-landing-page
This project showcases responsive web design principles, smooth animations and transitions, custom fonts, and a clean, semantic code structure. It is built using HTML, CSS, and JavaScript.
https://github.com/thekiranmahajan/ansrsource-landing-page
css-animations css-flexbox css3 googlefonts html-css-javascript html5 javascript
Last synced: 7 months ago
JSON representation
This project showcases responsive web design principles, smooth animations and transitions, custom fonts, and a clean, semantic code structure. It is built using HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/thekiranmahajan/ansrsource-landing-page
- Owner: thekiranmahajan
- Created: 2024-06-14T06:59:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-16T16:39:32.000Z (over 1 year ago)
- Last Synced: 2025-01-27T14:52:17.447Z (9 months ago)
- Topics: css-animations, css-flexbox, css3, googlefonts, html-css-javascript, html5, javascript
- Language: HTML
- Homepage: https://ansrsource-landing-page.vercel.app
- Size: 1.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Skill Hoisting: A Better E-Learning Platform
Skill Hoisting is a comprehensive and aesthetically pleasing online learning platform. This project showcases responsive web design principles, smooth animations and transitions, custom fonts, and a clean, semantic code structure. It is built using HTML, CSS, and JavaScript.
## Features
### HTML
- **Semantic HTML5**: Utilizes modern HTML5 elements for better structure and accessibility.
- **SEO Meta Tags**: Includes essential meta tags for search engine optimization.
- **Open Graph Tags**: Supports Open Graph protocol for enhanced social media sharing.
- **Accessibility**: Ensures that the website is accessible to all users, including those with disabilities.
### CSS
- **Responsive Design**: Fully responsive layout that adjusts seamlessly across different screen sizes.
- **Custom Fonts**: Uses Google Fonts for a unique and professional look.
- **Aesthetic Design**: Pleasing color scheme and typography for better user experience.
- **Smooth Animations**: Implements smooth animations and transitions for a modern feel.
- **Media Queries**: Tailors the design to specific devices using media queries.
- **Scrollbar Removal**: Prevents horizontal scrolling on small screens to enhance mobile usability.
### JavaScript
- **Dynamic Year**: Automatically updates the year in the footer.
- **Smooth Scrolling**: Implements smooth scrolling behavior for in-page navigation.
- **Responsive Navigation**: Mobile-friendly navigation menu that can be toggled open and closed.
- **Clean and Modular Code**: Well-organized and commented JavaScript for ease of maintenance.
## Preview
## Live Demo
https://ansrsource-landing-page.vercel.app
## How to Run on a Local Machine
1. **Clone the Repository**
```sh
git clone https://github.com/thekiranmahajan/ansrsource-landing-page
```
2. **Navigate to the Project Directory**
```sh
cd ansrsource-landing-page
```
3. **Open the Project**
- Simply open the `index.html` file in your preferred web browser.
## Folder Structure
```
skill-hoisting/
├── images/
│ ├── close.svg
│ ├── course1.jpeg
│ ├── course2.png
│ ├── course3.png
│ ├── image5.jpg
│ ├── open.svg
│ └── social.png
├── styles.css
├── script.js
├── index.html
└── README.md
```
## Assignment Highlights
- **Complete Responsiveness**: The website is fully responsive, providing a seamless experience on all devices.
- **Aesthetically Pleasing Design**: Uses a pleasing color scheme and custom fonts from Google Fonts to enhance visual appeal.
- **Smooth Animations and Transitions**: CSS animations and transitions provide a smooth and modern user experience.
- **Quality Code**: The codebase is clean, well-organized, and adheres to best practices for HTML, CSS, and JavaScript.
- **Semantic Markup**: HTML5 semantic elements improve the structure and accessibility of the content.
- **Accessibility**: Ensures that the website is accessible to a wide range of users, including those with disabilities.
- **SEO Friendly**: Includes essential meta tags for better search engine optimization.
- **Dynamic Content**: JavaScript is used to dynamically update the content, such as the current year in the footer.
- **Mobile-Friendly Navigation**: The navigation menu is optimized for mobile devices, allowing users to easily navigate the site on smaller screens.
## Conclusion
Skill Hoisting is a showcase of modern web development techniques, combining aesthetics with functionality. This project demonstrates how to build a responsive, accessible, and SEO-friendly website using HTML, CSS, and JavaScript.