Web Development with Coding
Building a Landing Page
In This Section, You Will Learn:
- • What makes a good landing page
- • Planning your project structure
- • Building the HTML structure
- • Styling with CSS (responsive)
- • Adding JavaScript interactivity
- • Your hands-on assignment
What Makes a Great Landing Page?
- A landing page has ONE goal: Convert visitors to take action.
- Essential Sections:
- • Header: Logo + navigation
- • Hero: Headline + subheadline + CTA button
- • Features: 3-4 key benefits
- • Social Proof: Testimonials or logos
- • Call to Action: Final push to convert
- • Footer: Contact info + links
- Design Principles:
- • Clear visual hierarchy
- • Consistent colors and fonts
- • Plenty of white space
- • Mobile-responsive
- • Fast loading
Project Structure
- Organize your files properly from the start:
- “`
- my-landing-page/
- ├── index.html
- ├── styles/
- │ └── style.css
- ├── scripts/
- │ └── main.js
- └── images/
- └── logo.png
- “`
- Why This Structure:
- • Separation of concerns (HTML, CSS, JS separate)
- • Easy to find files
- • Scales as project grows
- • Industry standard
- VS Code Tips:
- • Install 'Live Server' extension
- • Install 'Prettier' for code formatting
- • Use Emmet shortcuts (type 'html:5' + Tab)
Building the HTML Structure
- Start with semantic HTML:
- “`
- <!DOCTYPE html>
- <html lang='en'>
- <head>
- <meta charset='UTF-8'>
- <meta name='viewport' content='width=device-width, initial-scale=1.0'>
- <title>Startup Name</title>
- <link rel='stylesheet' href='styles/style.css'>
- </head>
- <body>
- <header>
- <nav>…</nav>
- </header>
- <main>
- <section class='hero'>…</section>
- <section class='features'>…</section>
- </main>
- <footer>…</footer>
- <script src='scripts/main.js'></script>
- </body>
- </html>
- “`
- Always: Mobile-first, semantic, accessible
Styling with CSS
- Create a design system first:
- “`
- :root {
- –primary: #3B82F6;
- –dark: #1F2937;
- –light: #F9FAFB;
- }
- “`
- Hero Section Example:
- “`
- .hero {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
- padding: 2rem;
- }
- .hero h1 {
- font-size: clamp(2rem, 5vw, 4rem);
- }
- “`
- CTA Button:
- “`
- .btn-primary {
- background: var(–primary);
- color: white;
- padding: 1rem 2rem;
- border-radius: 8px;
- cursor: pointer;
- transition: transform 0.2s;
- }
- .btn-primary:hover {
- transform: scale(1.05);
- }
- “`
Adding JavaScript Interactivity
- Make your landing page come alive:
- Mobile Menu Toggle:
- “`
- const menuBtn = document.querySelector('.menu-btn');
- const nav = document.querySelector('nav');
- menuBtn.addEventListener('click', () => {
- nav.classList.toggle('open');
- });
- “`
- Smooth Scroll:
- “`
- document.querySelectorAll('a[href^="#"]').forEach(link => {
- link.addEventListener('click', e => {
- e.preventDefault();
- document.querySelector(link.getAttribute('href'))
- .scrollIntoView({behavior: 'smooth'});
- });
- });
- “`
- Form Handling:
- “`
- const form = document.querySelector('form');
- form.addEventListener('submit', e => {
- e.preventDefault();
- alert('Thank you for signing up!');
- });
- “`