Responsive Web Design Tips for Beginners

Introduction

• Common problem for beginner developers: website looks good on PC but not on mobile.
• Importance of responsive design to ensure websites look good on all devices.

Simulating Device Viewports

• Both Microsoft Edge and Google Chrome have features to simulate how a website appears on different devices.
• Use the "inspect" feature to switch between device views (e.g., iPhone).

Example Problem

• Created a simple webpage that looks perfect on a PC but ugly on a mobile device.
  • Example text displayed: "Hello there, you’re on a PC"
  • On mobile: "Hello, you’re on a phone"

Creating the HTML Structure

1. Create a new HTML file (e.g., index.html) and link a CSS file.
2. Add a div class for text content:
   • PC view: Hello there, you’re on a PC 😊
   • Mobile view: Hello, you’re on a phone 😊

Styling with CSS

• CSS adjustments made for better appearance:
  • Centering text with margins and text alignment.
  • Setting font size to 50 pixels and choosing a font family (e.g., Apple System).

Visibility Control

• Initially both texts are visible.
• Control visibility using CSS:
  • For PC view, use visibility: collapse; for phone text.
  • For mobile view, use visibility: visible; for phone text.

Responsive Design Implementation

• Use media queries to adjust display based on screen size:
  • Example settings for iPhone: max-width: 414 pixels.
• Result:
  • Mobile: Displays "Hello, you're on a phone".
  • PC: Displays "Hello there, you’re on a PC".

Conclusion

• Demonstrated a simple way to create responsive text based on device screen size.
• Encouragement to experiment with responsive design techniques.
• Invite questions or comments from viewers.