Project 3: Making Your Website Mobile-Friendly

Instructions:

Start with Your Project 2 Files:

Create a new folder named "Project3"
Copy your three HTML files and styles.css from Project 2 into this folder

Add Viewport Meta Tag:

Add this line in the <head> section of each HTML file:


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Update Your CSS:

Add these responsive styles to your CSS file:


/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile-friendly navigation */
@media screen and (max-width: 600px) {
    body {
        padding: 10px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    nav {
        text-align: center;
    }
    
    nav a {
        display: block;
        margin: 5px 0;
    }
    
    section {
        padding: 15px;
    }
}

Test Your Website:

Open Chrome and load your website
Open Chrome DevTools:
- Right-click anywhere on the page
- Select "Inspect"
- Click the "Toggle device toolbar" button (mobile icon)
Test different screen sizes:
- Desktop view (default)
- Tablet view (768px)
- Mobile view (375px)
Make sure all three pages look good on each screen size

Submission:

Make sure your Project3 folder contains:
- index.html file
- page2.html file
- page3.html file
- styles.css file
Compress your "Project3" folder into a zip file
Submit your zip file here: Submit Project 3

Project 3: Making Your Website Mobile-Friendly

Project 3:

Making Your Website Mobile-Friendly: Example Site

Goal:

Instructions:

Start with Your Project 2 Files:

Add Viewport Meta Tag:

Update Your CSS:

Test Your Website:

Submission: