Task 3 Part 2 HTML CSS Website Quarter 3 Qualify assignment || Governor Sindh IT Course

Task 3: HTML/CSS Website
Image link is Whatsapp channel pe hai whatsapp.com/c...
Objective:
Create a visually appealing and functional website using HTML and CSS.
Requirements:
1. Website should have at least 5 pages (Home, About, Services, Contact, Blog)
2. Use HTML5 semantic elements
3. Implement CSS3 styles and layouts
4. Include responsive design for mobile devices
5. Add interactive elements (e.g., navigation menu, hover effects)
HTML Structure:
1. Create a new HTML document (index.html)
2. Define the document type (DOCTYPE html)
3. Set the character encoding (UTF-8)
4. Create the basic structure:
Header (head)
Body (body)
Footer (footer)
HTML Pages:
1. Home (index.html)
2. About (about.html)
3. Services (services.html)
4. Contact (contact.html)
5. Blog (blog.html)
CSS Styles:
1. Create a new CSS file (styles.css)
2. Define font families, sizes, and colors
3. Set layout and spacing for elements
4. Implement responsive design using media queries
5. Add interactive styles (hover, active, focus)
CSS Layout:
1. Header: logo, navigation menu
2. Hero Section: background image, heading, call-to-action
3. Main Content: sections for about, services, contact
4. Footer: copyright, social media links
Responsive Design:
1. Use media queries to adjust layout for:
Mobile devices (max-width: 768px)
Tablets (max-width: 1024px)
Desktops (min-width: 1025px)
Interactive Elements:
1. Navigation menu with hover effects
2. Hover effects for buttons and links
3. Active states for buttons and links
Additional Features:
1. Image gallery (using HTML and CSS)
2. Contact form (using HTML and CSS)
3. Social media integration (using HTML and CSS)
Validation and Testing:
1. Validate HTML and CSS using W3C validators
2. Test website on different browsers and devices
3. Ensure accessibility and usability
Deliverables:
1. HTML files (index.html, about.html, services.html, contact.html, blog.html)
2. CSS file (styles.css)
3. Image files (logo, background images, etc.)
4. Responsive design testing report
Timeline:
1. Planning and design: 2 days
2. HTML and CSS coding: 4 days
3. Testing and validation: 2 days
4. Total: 8 days
Resources:
1. W3Schools
2. Mozilla Developer Network
3. HTML and CSS tutorials on RUclips
4. Online code editors (e.g., CodePen, JSFiddle)