Summary 5

Responsive Design

Topic 1 - What is responsive design?

Responsive design is used to make your webpage look good on all devices. It uses HTML and CSS elements to automatically resize, hide, shrink, or enlarge a website. This ensures that your website looks correct and visually appealing no matter where it is viewed.

Topic 2 - Making the content fit in html.

When adding photos to your website, it's a good idea to include at least three different sizes for various screen types. This ensures the image displays properly on those specified screen sizes. You can also adjust text, such as a header, to fit the screen size. You might want the font to appear a certain way on a computer screen but differently on a phone, and by adjusting it, you can better convey your message.

Topic 3 - CSS media queries

Media queries are used to create different style rules for various media types, such as the width and height of a viewport, orientation, and resolution. To do this, you define the media screen you are targeting and the minimum or maximum width, followed by the properties you want to apply. You can set things like color, element orientation, and more.