Health Care Landing Page 2 - JavaScript (Vanilla), HTML5, CSS3 Fundamental Project 3 (Framework-free SPA)

A responsive, modern health care website built with HTML, CSS, and JavaScript. It is designed for clinics, hospitals, or health-related organizations to showcase their services, departments, and contact information. The project demonstrates best practices in web design, UI/UX, and responsive layouts, making it a great learning resource for beginners and intermediate developers.

• Live Demo: https://healthcare-ui-2.vercel.app/

Table of Contents

• Project Summary
• Features
• Project Structure
• Technologies Used
• How to Run
• Component & Code Walkthrough
• How to Reuse Components
• Keywords
• Conclusion

---

Project Summary

This project is a multi-page, framework-free healthcare UI built with vanilla HTML, CSS, and JavaScript. It includes reusable shared layout components (header/footer), page-specific sections for services, departments, blog, and contact, plus responsive behavior and interactive UI patterns such as filters, tabs, accordions, and hover states.

The codebase is structured to stay beginner-friendly while still demonstrating practical front-end patterns: centralized data, reusable render helpers, clean section-based styling, and deployment-ready setup for static hosting.

---

Features

• Responsive navigation bar with burger menu for mobile
• Hero section with a call-to-action
• Appointment booking form (UI only)
• Services section with icons
• Quality highlights
• About section with image and description
• Departments overview
• Footer with contact, departments, address, and social links
• Fully responsive design for all devices

---

Project Structure

health-website-main/
│
├── index.html         # Main HTML file
├── style.css          # Stylesheet
├── index.js           # JavaScript for navbar interactivity
├── public/images/               # Images and icons
│   ├── favicon.ico
│   ├── logo.png
│   ├── pic1.jpg
│   └── pic2.jpg

---

Technologies Used

• HTML5
• CSS3 (with Flexbox and media queries)
• JavaScript (ES6)
• Font Awesome (CDN)
• Google Fonts (CDN)

---

How to Run

To view the website locally, follow these steps:

1. Open the Project Folder:
   • Download or clone the repository.
   • Open the health-care-2 folder.
2. Open in Browser:
   • Double-click index.html or right-click and choose "Open With" → your browser.
3. (Optional) Run a Local Server:
   • For dynamic features or best practice, run a local server:
     • With Python 3: python3 -m http.server
     • Open http://localhost:8000 in your browser.

---

Component & Code Walkthrough

index.html

• DOCTYPE and Meta Tags: Standard HTML5 setup with viewport for responsiveness.
• Navbar: Responsive navigation with logo and burger menu for mobile.
• Main Section: Hero text and appointment form (UI only, not connected to backend).
• Services: Grid of service cards with Font Awesome icons.
• Quality: Highlights clinic strengths.
• About: Image and description of the clinic.
• Departments: List of medical departments.
• Footer: Contact info, departments, address, social icons.

style.css

• Uses Google Fonts and Font Awesome.
• Flexbox for layout, media queries for responsiveness.
• Custom styles for each section and component.
• Mobile-first adjustments for navigation and layout.

index.js

• Handles burger menu click to toggle navigation on mobile:

  burger = document.querySelector(".burger");
  navbarItems = document.querySelector(".navbar-items");
  nav = document.querySelector(".nav");
  burger.addEventListener("click", () => {
    navbarItems.classList.toggle("h-class");
    nav.classList.toggle("v-class");
  });

public/images/

• Contains favicon, logo, and section images.

---

How to Reuse Components

• Navbar & Footer: Copy HTML and CSS blocks. Update links and icons as needed.
• Appointment Form: Use as a template for UI forms. Add backend logic as required.
• Service/Department Cards: Reuse card structure for other content types.
• Responsive Layout: Media queries and Flexbox can be adapted for other projects.

---

Keywords

healthcare, responsive website, HTML, CSS, JavaScript, clinic, hospital, appointment, UI, web design, template, Font Awesome, Google Fonts, mobile-friendly

---

Conclusion

This project is a clean, modern template for health care websites. It demonstrates responsive design, modular components, and best practices in front-end development. Feel free to customize and extend it for your own needs or use it as a learning resource.

---

Happy coding! 🎉

Thank you!

---