🎨 CSS & Forms

CSS & Forms
Tasks

Tasks 15–27 — HTML CSS, External Stylesheets, GitHub Hosting & Forms

6CSS Tasks
3External CSS
1GitHub Pages
3HTML Forms
⚡ Next: JavaScript Tasks →

🎨 HTML CSS Practice

15Student Profiles Table Completed

Student details displayed in a styled table with CSS borders, colors, and hover effects.

PhotoNameBranchGPA
👤Ishaan K.CSE9.2
👤Neha S.ECE9.0
👤Rohit M.IT8.8
*Rows highlight on hover with CSS
16Product Catalog Completed

Product catalog using HTML table with images, descriptions, prices and CSS styling.

👟
Sneakers
Rs.2,999
⌚
Watch
Rs.5,499
🎧
Headphones
Rs.3,999
17Simple Dashboard Completed

Dashboard page with stat widgets displaying numbers in styled cards.

1,248
Users
Rs.85K
Revenue
342
Orders
18Container Max-Width Completed

Page with a .container div having max-width of 1200px, centered with auto margins.

.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
This div is centered with max-width applied.
193 Wrapped Sections Completed

Three content sections wrapped inside a .container class with individual styling.

Section 1: Introduction
Section 2: Features
Section 3: Pricing
All wrapped in .container div
20Login & Registration Completed

Centered login form with styled inputs, submit button, and registration link.

Login
Forgot?
New user? Register

🔗 CSS — External Style Sheet

21Course Details Page Completed

College course details page styled with an external CSS file linked via <link> tag.

<link rel="stylesheet" href="styles.css">
External CSS used for fonts, colors, spacing, and responsive layout.
22Product Page Completed

Online store product page with external CSS for layout, typography, and styling.

Product cards styled with external stylesheet including hover effects, shadows, and grid layout.
23Responsive Contact Form Completed

Contact form using HTML with external CSS file for responsive sizing and styling.

Form uses media queries in external CSS to stack fields on mobile and go side-by-side on desktop.

GitHub Hosting Practice

24GitHub Pages Portfolio Completed

Personal portfolio website developed and hosted live on GitHub Pages.

Steps:
  1. Created GitHub repository
  2. Added HTML, CSS, JS files
  3. Enabled GitHub Pages in Settings
  4. Site deployed at username.github.io

📋 HTML Forms Practice

25Login Form Completed

Login form with username/email, password, remember me checkbox, and submit button.

26Registration Form Completed

Registration with first name, last name, email, phone, password, and gender selection.

27Contact Form Completed

Contact form with full name, email, subject dropdown, and message textarea.

← HTML Tasks (1–14)