Module 54 : Building a Complete Landing Page – Responsive and accessible landing page.
1. Introduction to Landing Pages
What is a landing page?
Purpose: Lead generation, product showcase, campaign goal.
Types: Click-through, lead capture, product detail.
Anatomy of a landing page:
Hero section
Features section
Testimonials or social proof
Call to Action (CTA)
Footer
Tools used:
Code editor (VS Code)
Browser dev tools
GitHub Pages / Netlify for deployment
Exercise:
Analyze 3 popular landing pages (e.g., Apple, Dropbox, Mailchimp) and identify the above sections.
2. Setup and Boilerplate
Create project folder structure:
bash
code
/landing-page
├── index.html
├── style.css
├── script.js
├── /images
└── /fonts
Create a semantic HTML5 structure:
<header>, <main>, <section>, <footer>
Link external CSS and JS
html
code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Project Landing Page</title> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- Content goes here --> <script src="script.js"></script> </body> </html>
Exercise:
Scaffold a basic HTML5 template and open in browser.
3. Responsive Layout with CSS Flexbox & Grid
Mobile-first approach:
Start from small screens, then expand.
CSS Techniques:
Flexbox for navbar, hero
Grid for feature sections
Media queries for breakpoints
css
code
/* Mobile-first styles */ body { font-family: sans-serif; margin: 0; } /* Larger screens */ @media (min-width: 768px) { .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } }
Exercise:
Create a responsive grid of 3 feature cards.
Add hover effects and transitions.
4. Accessibility (WCAG)
Use semantic tags (<button>, <nav>, <label>)
Add alt text to images, aria-label when needed
Ensure color contrast using tools like WebAIM Contrast Checker
Keyboard navigability and focus outlines
html
code
<button aria-label="Learn More About Our Features">Learn More</button>
Exercise:
Add keyboard navigation and tab-indexes.
Use Lighthouse in Chrome DevTools to audit accessibility.
5. Interactive Elements with JavaScript
Smooth scroll to sections
Toggle mobile menu
Form validation
javascript
code
document.querySelector('.menu-toggle').addEventListener('click', () => { document.querySelector('nav').classList.toggle('open'); });
Exercise:
Add toggle button to nav menu for mobile view.
Implement smooth scroll on anchor links.
6. Optimizing for Performance & SEO
Use compressed images (WebP, TinyPNG)
Meta tags: title, description, OG tags
Lazy loading images (loading="lazy")
Add favicon
Exercise:
Add SEO tags to your landing page.
Use Google PageSpeed Insights to audit your page.
7. Deployment
Version control with Git
Publish using:
GitHub Pages: simple and free
Netlify: drag-and-drop or Git integration
Exercise:
Push code to GitHub
Deploy to Netlify or GitHub Pages and share link
8. Project
Create a landing page for a fictional product/service including:
Header with logo and navigation
Hero section with headline, CTA
3-4 features with icons
Testimonials section
Contact form (with validation)
Footer with links and social icons
Page must be responsive and pass an accessibility audit.
Code reviewed for structure, best practices, and visual quality.
Tools :
Use Figma or Adobe XD to demonstrate wireframing
Live-code examples in VS Code with screen recording
Use browser DevTools to show responsiveness and audits
Breakdown:
Lecture
Topic
Time
1
Introduction to Landing Pages
30 min
2
Project Setup + HTML Structure
45 min
3
CSS Layouts + Responsive Design
1 hr
4
Accessibility Deep Dive
45 min
5
JavaScript Interactivity
1 hr
6
SEO and Performance Optimization
30 min
7
Deployment Tutorial
30 min
8
Final Project Walkthrough + Review
1 hr
Optional Advanced Additions:
Integrate Google Fonts or custom font loading
Add animations with CSS or GSAP
Use a CSS framework like Tailwind or Bootstrap (optional)
No comments:
Post a Comment