Css Module 60

  Module 60 : A Complete Responsive Website – A capstone project bringing everything together. 

Project Scope:

Students will design and implement a portfolio website (or business landing page) including:

Home Page

About Page

Portfolio/Projects Section

Contact Form

1. Planning and Wireframing

           

Use pen/paper or tools like Figma or Adobe XD to wireframe the website layout.

Define the navigation structure and number of pages.

Choose a color scheme, fonts, and overall visual hierarchy.

Exercise:

Sketch or design a 3-page layout in Figma.

Example:

Header: Logo + Nav Menu

Hero Section: Intro text and image

Content Sections: Services or projects

Footer: Social links and copyright

Explanation:

Wireframing ensures clarity in layout and helps organize content before coding. It separates structure from design.

2. HTML Structure

Create a new project folder with subfolders: /images, /css, /js.

Use semantic HTML5 elements: <header>, <nav>, <main>, <section>, <footer>.

Exercise:

Build the structure for index.html with sections for hero, services, and footer.

Example:

html

 code

<header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </header> <main> <section class="hero">...</section> <section class="projects">...</section> </main> <footer>...</footer>

Explanation:

Semantic HTML improves SEO and accessibility. It makes code cleaner and easier to maintain.

3. CSS and Layout

Method:

Create a style.css file.

Apply Flexbox or Grid for layout.

Use media queries for responsiveness.

Exercise:

 Make the header and main layout responsive using Flexbox.

Example:

css

code

header nav ul { display: flex; justify-content: space-around; } @media (max-width: 768px) { header nav ul { flex-direction: column; } }

Explanation:

Flexbox allows flexible alignment of elements. Media queries adapt styles based on screen width.

4. Adding Interactivity with JavaScript

Method:

Create main.js for all scripts.

Add features like:

Navigation toggle

Form validation

Scroll to top button

Exercise:

Implement mobile navigation toggle.

Example:

html

 code

<button id="menu-toggle">Menu</button> <ul id="nav-menu" class="hidden"> <li>Home</li> <li>About</li> </ul>

javascript

 code

document.getElementById('menu-toggle').onclick = () => { document.getElementById('nav-menu').classList.toggle('hidden'); };

Explanation:

JavaScript makes the site interactive. It enhances UX by handling dynamic elements.

5. Responsive Design Principles

Method:

Use relative units (em, %) instead of pixels.

Use media queries for breakpoints: 320px, 768px, 1024px.

Optimize images for all screen sizes.

Exercise:

Style images to scale with the screen.

Example:

css

code

img { width: 100%; height: auto; }

6. Form Handling and Validation

Method:

Add a form with inputs: name, email, message.

Use HTML5 validation + JavaScript for custom messages.

Exercise:

Create a contact form with live error checking.

Example:

html

 code

<form id="contactForm"> <input type="text" required placeholder="Name"> <input type="email" required placeholder="Email"> <textarea required></textarea> <button type="submit">Send</button> </form>

javascript

 code

document.getElementById("contactForm").addEventListener("submit", (e) => { // Custom validation logic });

7. Final Assembly and Deployment

Method:

Link all HTML pages together.

Test across devices and browsers.

Deploy via GitHub Pages or Netlify.

Exercise:

Task: Deploy website using GitHub Pages.

Steps:

Push code to a GitHub repo.

Go to repo > Settings > Pages > Select branch.

Site goes live at https://username.github.io/projectname

Build a Complete Portfolio Site

Objective:

Create a fully responsive and interactive personal portfolio site with at least 3 pages, styled and deployed live.

Required:

HTML structure for Home, About, Projects, and Contact.

CSS styles for layout and responsive behavior.

JavaScript for interactivity.

Hosted version on GitHub Pages.

 Report Template:

Objective: Build and publish a responsive website.

Tools Used: VSCode, Chrome, GitHub, Figma.

Procedure:

Plan and wireframe

Develop HTML/CSS layout

Add interactivity

Optimize responsiveness

Deploy site

Screenshots: Attach Figma design, code snapshots, and live site screenshots.

Summarize what you learned about structuring, styling, and publishing a responsive site.

Criteria:

Criteria

Points

Wireframe & Design Plan

10

HTML5 Semantics

10

CSS Layout and Style

20

Responsiveness

20

JavaScript Interactivity

15

Form & Validation

10

Deployment

10

Code Cleanliness & Docs

5