html-css-js

This is my HTML & TAILWIND CSS project

mahnoor-demo

This is my first Git Repository.

Author - Mahnoor

mahnoor-muhammad-naeem_01

I am Mahnoor

Frontend Practice Portfolio

A collection of small, focused front‑end projects: Tailwind CSS UIs, JavaScript games, forms, mini projects, and mobile‑first layouts. Each folder is self‑contained; open the HTML in a browser or serve locally.

---

Repository Structure

.
├─ 3D_Login_Form/                       # 3D-styled login UI demo
├─ contact page/                        # Contact form/page (validation, layout)
├─ facebook_clone_using_tailwind_css/   # Facebook UI clone built with Tailwind CSS
├─ HTML-TAILWIND-CSS/                   # Tailwind + HTML/CSS practice snippets
├─ Internship/                          # Internship tasks/assignments
├─ JS_Game/                             # Small JavaScript game(s)
├─ JS_Project/                          # Assorted JavaScript projects
├─ mini_project/                        # Bite-size projects and experiments
├─ Mobile_App/                          # Mobile-first web app UI
├─ img/                                 # Shared images/assets
├─ LICENSE
└─ README

---

Quick Start

Choose any folder and run it locally.

Option A: Open directly

If the folder contains an index.html, double-click it to open in your browser.

Option B: Serve locally (recommended for relative paths/CORS)

# VS Code: use the "Live Server" extension

# Or a quick static server from the folder root
npx serve .
# or
python -m http.server 5500

Option C: Tailwind CLI or Node-based examples

If a folder includes a package.json, install and run scripts:

npm install
npm run dev     # development server (if defined)
npm run build   # production build (if defined)

---

Folder Guides

• 3D_Login_Form — Open index.html. Explore CSS transforms and perspective.
• contact page — Open index.html. Check form validation and responsive layout.
• facebook_clone_using_tailwind_css — If CDN-based, open index.html. If using Tailwind CLI, use the Node scripts above.
• HTML-TAILWIND-CSS — Open the HTML files directly; examples show utility-first styling patterns.
• Internship — Read any README inside for context; structure may vary per task.
• JS_Game — Open index.html. Use arrow keys/mouse as indicated in the page.
• JS_Project — Open index.html or run the specific script per subfolder.
• mini_project — Open each project’s index.html or read its notes.
• Mobile_App — Open index.html. Designed for small screens; use browser dev tools mobile view.

Notes

• If assets do not load using file protocol, serve the folder with Option B.
• For Tailwind projects without prebuilt CSS, ensure npm run dev or npx tailwindcss is used to generate the output CSS.

---

Conventions

• Simple file/folder names; each example keeps dependencies minimal.
• Add a short README inside a folder if special setup is required.
• Prefer small, incremental commits with clear messages.

---

License

See LICENSE for terms.