DEV Community

Cover image for HTML, CSS, and JavaScript Projects
Abhishek Gurjar
Abhishek Gurjar

Posted on

HTML, CSS, and JavaScript Projects

Welcome to my collection of HTML, CSS, and JavaScript projects! This blog post provides a comprehensive overview of various projects I've created, showcasing different aspects of web development. Each project is available in its own repository, which includes all the code you'll need to explore and learn from.

Table of Contents

Introduction

As a web developer, I enjoy working on a variety of projects that help me refine my skills in HTML, CSS, and JavaScript. From simple calculators to more complex applications, these projects demonstrate different techniques and best practices in web development. Below, you'll find a curated list of projects, each with a link to its respective GitHub repository.

Project Overview

Here's a rundown of the projects I've worked on:

  1. Abhi ki News

    • A news application that aggregates and displays the latest headlines.
    • View Code
  2. Advice Generator

    • Generates random advice to provide users with helpful tips.
    • View Code
  3. Age Calculator

    • A tool to calculate age based on birthdate input.
    • View Code
  4. Analog Clock

    • Displays a functional analog clock using JavaScript.
    • View Code
  5. Article Card

    • A stylized card component to showcase articles.
    • View Code
  6. BMI Calculator

    • Calculates Body Mass Index based on user input.
    • View Code
  7. Countdown Timer

    • A timer that counts down to a specified date and time.
    • View Code
  8. Dice Roll Simulator

    • Simulates rolling dice with a random number generator.
    • View Code
  9. Drum Kit

    • A virtual drum kit that allows users to play different drum sounds.
    • View Code
  10. FAQ Accordion

    • An accordion-style FAQ section for websites.
    • View Code
  11. Flip Coin

  12. Focus on Day

    • Helps users focus on daily tasks with a focused UI.
    • View Code
  13. Foodie Hamburger

    • A stylish hamburger menu for food-related websites.
    • View Code
  14. Loan Calculator

    • Calculates loan repayments based on user inputs.
    • View Code
  15. Login Form

    • A basic login form with form validation.
    • View Code
  16. Month Calendar

    • Displays a calendar for any given month.
    • View Code
  17. Mortgage Calculator

    • Calculates mortgage payments based on various inputs.
    • View Code
  18. News Homepage

    • A homepage layout for a news website.
    • View Code
  19. Newsletter Signup Form

    • A form for users to subscribe to newsletters.
    • View Code
  20. Password Generator

    • Generates secure passwords with customizable options.
    • View Code
  21. Pomodoro Timer

    • A timer to help with productivity using the Pomodoro Technique.
    • View Code
  22. Profile Card

    • A card component to display user profiles.
    • View Code
  23. QR Code Generator

    • Generates QR codes based on user input.
    • View Code
  24. Rock Paper Scissors

    • A game of Rock Paper Scissors implemented in JavaScript.
    • View Code
  25. Simple Calculator

    • A basic calculator for performing arithmetic operations.
    • View Code
  26. Sneakers Ecommerce

    • An e-commerce page for sneakers with product listings.
    • View Code
  27. Temperature Converter

    • Converts temperatures between Celsius, Fahrenheit, and Kelvin.
    • View Code
  28. Testimonials Slider

    • A slider component for displaying user testimonials.
    • View Code
  29. Text to Speech Generator

    • Converts text input into spoken words using the Web Speech API.
    • View Code
  30. Tic-Tac-Toe

    • A classic Tic-Tac-Toe game implemented in JavaScript.
    • View Code
  31. Tip Calculator

    • Calculates the tip amount based on bill and tip percentage.
    • View Code

32

. Todo List
- A simple to-do list application for managing tasks.
- View Code

  1. Weight Converter
    • Converts weights between different units.
    • View Code

Getting Started

To clone and run any of these projects locally, follow these steps:

  1. Clone the repository:
   git clone https://github.com/abhishekgurjar-in/html-css-javascript-projects.git
Enter fullscreen mode Exit fullscreen mode
  1. Navigate to the project directory:
   cd <project-name>
Enter fullscreen mode Exit fullscreen mode
  1. Open the project in your browser: Open the index.html file in your browser to see the project in action.

Contributing

If you would like to contribute to any of these projects, please follow these guidelines:

  1. Fork the repository.
  2. Create a new branch for your changes.
  3. Commit your changes and push them to your forked repository.
  4. Create a pull request with a description of your changes.

Author

Abhishek Gurjar

Top comments (0)