Learning Responsive Web Design

A Guide On HTML and CSS For Responsive Web Design

About the Tutorial and Presenter

The tutorial I selected is called "A Practical Guide to Responsive Web Design" posted on YouTube by Kevin Powell. Kevin Powell is an educational YouTuber who works mainly on web development and design tutorials. His specialty appears to be primarily with CSS as listed in the about section of his YouTube channel. His videos include things like recreating popular web effects and many tutorials and examples of CSS and HTML. He also posts reaction videos as well as challenge videos related to coding. Overall he appears to be a reliable source for learning web development and design.

What is Responsive Web Design?

Responsive web design is a technique used to create websites that will work with various screen sizes and devices. A responsive website should work on almost any device so that way its contents are viewable and accessible. Instead of creating separate HTML and CSS files for different devices, responsive web design uses flexible layouts that adapt to the available screen space.

Within the Tutorial

Within the actual video itself Mr. Powell actually demonstrates several ways to achieve various goals. For instance when adjusting a section of text it is more efficient to use things such as max-width or min-height instead of the opposite. This is useful because when you are adjusting the size of the screen or viewing window it allows content to adapt to a smaller screen size. This is so that the content you are wanting to show doesn't spill out behind an image or other sections of text.

Throughout the video the presenter often claims how using media queries is not always the best option for optimizing responsive web design. However further into the video he shows that there are times when media queries are indeed necessary to achieve the exact layout and design goals. He uses the example of having columns on different screen sizes. He demonstrates using a media query you can have either one column or multiple depending on the screen size. He also emphasizes that he mainly uses media queries for complexity and most of the time you want to let the browser do a lot of the work.

Watch the YouTube Tutorial

The embedded video below is Kevin Powell's full tutorial on the topic of responsive web design.

Watch the full tutorial on YouTube