EduPlatform - My First Online Learning Website Project

Project Goal

This project, "EduPlatform," is a website for an online learning platform. It uses HTML, CSS, and JavaScript. It heavily focuses on demonstrating a good Git and GitHub workflow, which was a key part of this project.

What I Learned and Built:

• Website Pages:Created the main pages like Home, Courses, About Us, and Contact.
• Looks Good Everywhere: Made the website responsive so it works well on phones, tablets, and computers.
• Easy to Use: Added clear navigation that changes color when you scroll.
• Smooth Scrolling: Made buttons and navigation links scroll smoothly to different sections.
• Interactive Bits:
  • Course cards on the homepage have a small animation when they appear.
  • The copyright year in the footer updates automatically every year using JavaScript.
  • A "Back to Top" button appears when you scroll down, helping you get back to the top quickly.
  • The website header changes its background color when you scroll down.
• Ready for Search Engines & Social Media: Added special codes (meta tags) to help search engines find the site and make it look good when shared on social media.

Technologies Used

• HTML: For the structure of all the web pages.
• CSS: For styling how everything looks, including colors, fonts, and layout.
• JavaScript: For adding interactive features and dynamic elements.

My Git and GitHub Journey (How I Built This)

A big part of this project was learning how to use Git for version control and GitHub to manage my code. I used different branches for different features, which helped me keep my work organized.

Here's how I used branches in this project:

1. master Branch:

   • This is the main branch. All my finished work ends up here.
   • Total Commits: This master branch has 25 commits, showing all the small, organized steps I took to build this website. Each commit represents a specific change or new feature.

2. courses-update Branch:

   • What I did here: I worked on showing the course cards on the homepage, making them look good and animating them.
   • What happened next: I merged this branch into master. After merging, I cleaned up by deleting this branch from GitHub, which is a common practice when a feature is complete.

3. navigation-update Branch:

   • What I did here: I focused on building the main navigation bar and adding basic content to the courses.html, about.html, and contact.html pages.
   • What happened next: I merged this branch into master. For this project, I chose to keep this branch visible on GitHub after merging, so you can see how I worked on this specific feature.

4. final-refinements Branch:

   • What I did here: This branch was for all the finishing touches and small improvements, like the dynamic copyright year, the "Back to Top" button, the changing header, the "Call to Action" section, updated course images, the new navigation hover effect, and the meta tags for SEO.
   • What happened next: I merged this branch into master. Like navigation-update, I also kept this branch visible on GitHub to show the development steps for these final features.

How to See My Project

To run this website on your own computer:

1. Get the code:

   git clone [https://github.com/Lakshminair9746/eduplatform.git]

2. Go into the project folder:

   cd eduplatform

3. Open the website: Just open the index.html file in your web browser.

Ideas for Future Work

• Make the contact form actually send emails.
• Create separate detailed pages for each course.
• Add a way for users to sign up and log in.
• Improve responsiveness even more for very small screens.
• Replace all placeholder content with real images and text.

---

Thanks for checking out my project!