Project 02
Responsive Landing Page
Create a responsive landing page with a header, hero, featured content, and a contact or signup form that works across mobile, tablet, and desktop layouts.
Overview
This project focuses on intentional responsive design, tested layout changes, and user-centered form design. The page should adapt smoothly across screen sizes and make the form easy to find, understand, and complete.
Considerations
- Design a flexible layout that adapts across screen sizes and orientations.
- Use media queries to optimize layout and form presentation.
- Prioritize readability, navigation, and usability on small and large screens.
- Optimize images and content for loading performance.
- Use clear labels, appropriate input types, and accessible form markup.
- Follow accessibility expectations for alt text, semantic HTML, and contrast.
Milestones
Step 1
Plan
Define the landing page goal, audience, call to action, and form purpose.
Step 2
Wireframe
Sketch mobile, tablet, and desktop layout states before writing final CSS.
Step 3
Build
Create the header, hero, featured content, form, and responsive layout system.
Step 4
Test
Resize the page, test the form with a keyboard, check contrast, and optimize images.
Project Requirements
Header and navigation
- Create a header section with navigation.
- Navigation should stack vertically or otherwise adapt on smaller screens.
Hero section
- Design a visually engaging hero section with a clear call to action.
- Maintain the hero purpose and visual clarity across devices.
Featured content
- Include featured content, products, services, or information.
- Use responsive layout techniques to maintain balance and readability.
Contact or signup form
- Include a form that fits well across screen sizes.
- Use properly labeled fields and user-friendly controls.
- The form does not need to submit real data and may use a placeholder action.
- Include a text input, email input, textarea, and submit button.
Responsive styling
- Use cohesive typography, color, and spacing.
- Include at least three layout states, such as mobile, tablet, and desktop.
- Define at least two states with media queries.
- Use Flexbox or Grid at least once.
- Make the layout shift meaningfully between desktop and mobile.
Starter Kit
Start with the right files.
A responsive landing page starter with header, hero, featured content, contact form, and mobile-first CSS hooks.
Submission Guidelines
- Organize files in a dedicated project folder with clear naming conventions.
- Include an HTML file and an external CSS file.
- Publish the finished work for review.
Before You Submit
- I can explain the goal of the project and the design choices I made.
- I checked the work in the browser, not only in the editor.
- I verified links, images, responsive behavior, and accessibility basics.
- I committed the final version and can provide the repository or public URL when required.
Grading Criteria
- Successful implementation of responsive design principles.
- Navigation adapts for desktop and mobile screens.
- Consistent and visually appealing landing page styling.
- Effective use of media queries.
- Efficient image optimization for performance.
- Accessible, properly labeled form controls.
Rubric
Use these quality levels to understand what stronger work looks like without tying the brief to a specific point scale.
Responsive layout
- Strong
- Layout adapts meaningfully across mobile, tablet, and desktop with clear design intent.
- Meets
- Layout includes required responsive states and works across common viewport sizes.
- Needs Work
- Layout breaks, overflows, or does not meaningfully adapt across sizes.
Form quality
- Strong
- Form is easy to find, complete, and understand with connected labels and appropriate input types.
- Meets
- Form includes required fields and labels with minor usability issues.
- Needs Work
- Form fields are missing, labels are disconnected, or the form is hard to use.
Visual design
- Strong
- Typography, color, spacing, and hierarchy create a polished landing page.
- Meets
- Design is cohesive and readable with some refinement needed.
- Needs Work
- Design feels inconsistent, default, or hard to scan.
Media queries and layout systems
- Strong
- Media queries, Flexbox, or Grid are used intentionally to solve layout problems.
- Meets
- Required CSS techniques are present and mostly effective.
- Needs Work
- Responsive behavior is mostly accidental or missing required CSS techniques.
Accessibility and performance
- Strong
- Images, contrast, labels, and loading choices support a usable and efficient page.
- Meets
- Accessibility and performance basics are addressed with minor gaps.
- Needs Work
- The page has avoidable accessibility or performance problems.
Example Models
Use these low-fidelity models to calibrate what stronger, acceptable, and unfinished work can look like.
Strong Example
Focused course signup page
A landing page with a clear audience, strong call to action, responsive layout, and an accessible form.
Possible Structure
- header with simple navigation
- hero with one clear signup message
- three benefit cards that reflow from one column to three
- contact form with labels, input types, and helpful button text
- responsive spacing and readable line lengths
What To Notice
- The form is central to the page goal instead of being dropped at the bottom.
- Mobile and desktop layouts both feel intentionally designed.
- The visual hierarchy makes the next action obvious.
Meets Expectations
Local business landing page
A complete responsive page with the required sections, but some hierarchy and form refinement still needed.
Possible Structure
- header with navigation links
- hero with business name and short intro
- feature cards for services
- contact form with required fields
- basic media queries for mobile and desktop
What To Notice
- The required pieces are present and mostly functional.
- The design would improve with tighter spacing and stronger call-to-action language.
- The form works, but error and helper text could be clearer.
Needs Work
Desktop-only page with pasted form
A page with landing page pieces present, but the layout breaks on mobile and the form is difficult to use.
Possible Structure
- wide fixed-width layout
- navigation that overflows on small screens
- hero text with no clear action
- form inputs without connected labels
- images that stretch or load too large
What To Notice
- The page needs responsive decisions, not just smaller text.
- The form should be built semantically before visual polish.
- The landing page goal is unclear to the user.
Idea Starters
Product launch
- Features
- benefits
- testimonials
- FAQs
- early access or waitlist form
Local business
- Services or menu
- photos
- reviews
- location details
- booking or mailing list form
Online course or workshop
- Curriculum
- instructor bio
- testimonials
- pricing
- registration form