From b53167a65b47ad2684dfaf8f23cd669d4203b7d6 Mon Sep 17 00:00:00 2001 From: Rose Date: Wed, 17 Jan 2024 22:20:04 -0500 Subject: [PATCH 1/4] Information-behind-a-separate-link --- advanced_html_css/responsive_design/natural_responsiveness.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/advanced_html_css/responsive_design/natural_responsiveness.md b/advanced_html_css/responsive_design/natural_responsiveness.md index ece684fff2c..3349974359e 100644 --- a/advanced_html_css/responsive_design/natural_responsiveness.md +++ b/advanced_html_css/responsive_design/natural_responsiveness.md @@ -4,7 +4,7 @@ The first step to making responsive websites is using techniques that are _natur ### Learning outcomes * You'll learn a few tips for keeping your sites naturally responsive -Plain HTML, with no CSS is responsive. [Check this out](https://codyloyd.github.io/responsive-html/), and shrink your browser down to the size of a phone. It works perfectly! You could read that site on an apple watch. +Plain HTML, with no CSS is responsive. [Make sure to read the page](https://codyloyd.github.io/responsive-html/), and shrink your browser down to the size of a phone. It works perfectly! You could read that site on an apple watch. It's not realistic for every website you create to be as basic as plain text on a page, but it is important to keep in mind that most of the elements you're using to build your project are responsive until **you** change that with CSS. If you approach your project with this mindset and do your best to maintain that natural responsiveness, you might find that there isn't _that_ much extra you need to do to make your sites properly responsive. From 83640fcec9f4b2f6c69a1e1fc39845a0ae6a91fe Mon Sep 17 00:00:00 2001 From: Rose Date: Tue, 23 Jan 2024 21:41:40 -0500 Subject: [PATCH 2/4] Fix lint lesson errors --- .../natural_responsiveness.md | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/advanced_html_css/responsive_design/natural_responsiveness.md b/advanced_html_css/responsive_design/natural_responsiveness.md index 3349974359e..0ed1fdb4398 100644 --- a/advanced_html_css/responsive_design/natural_responsiveness.md +++ b/advanced_html_css/responsive_design/natural_responsiveness.md @@ -1,23 +1,26 @@ ### Introduction -The first step to making responsive websites is using techniques that are _naturally_ flexible. In a later lesson you'll learn how to completely rearrange items on a page based on screen size, but in most cases, it's preferable to rely on tools like flexbox and grid to make your pages work on a wide range of screens first. + +The first step to making responsive websites is using techniques that are *naturally* flexible. In a later lesson you'll learn how to completely rearrange items on a page based on screen size, but in most cases, it's preferable to rely on tools like flexbox and grid to make your pages work on a wide range of screens first. ### Learning outcomes + * You'll learn a few tips for keeping your sites naturally responsive Plain HTML, with no CSS is responsive. [Make sure to read the page](https://codyloyd.github.io/responsive-html/), and shrink your browser down to the size of a phone. It works perfectly! You could read that site on an apple watch. -It's not realistic for every website you create to be as basic as plain text on a page, but it is important to keep in mind that most of the elements you're using to build your project are responsive until **you** change that with CSS. If you approach your project with this mindset and do your best to maintain that natural responsiveness, you might find that there isn't _that_ much extra you need to do to make your sites properly responsive. +It's not realistic for every website you create to be as basic as plain text on a page, but it is important to keep in mind that most of the elements you're using to build your project are responsive until **you** change that with CSS. If you approach your project with this mindset and do your best to maintain that natural responsiveness, you might find that there isn't *that* much extra you need to do to make your sites properly responsive. The rest of this lesson is a list of tips you can use to maintain natural responsiveness. ### The viewport meta tag -When mobile phones first started getting web browsers, most websites were _not_ optimized for such small screen resolutions. To get around this, most phone browsers simulated a larger screen and displayed a zoomed-out version of the page. These days, however, we almost never want that behavior so we have to specify that we want our websites to be viewed at the actual non-zoomed screen resolution. + +When mobile phones first started getting web browsers, most websites were *not* optimized for such small screen resolutions. To get around this, most phone browsers simulated a larger screen and displayed a zoomed-out version of the page. These days, however, we almost never want that behavior so we have to specify that we want our websites to be viewed at the actual non-zoomed screen resolution. For this reason, you should add this snippet into the `` of your HTML file in just about every project you work on. -~~~html +```html -~~~ +``` It sets the initial width of the webpage to the size of the actual screen you're viewing it on, and telling it not to zoom in or out. Easy! @@ -46,15 +49,19 @@ This example shown below demonstrates the problem with s #### Avoid heights all together -In _most_ cases, you should avoid setting a height altogether. There are some exceptions to this rule (headers and footers perhaps) but you should prefer using margin and padding to increase space around your content. Using margin and padding will keep your elements flexible no matter what the content inside does. + +In *most* cases, you should avoid setting a height altogether. There are some exceptions to this rule (headers and footers perhaps) but you should prefer using margin and padding to increase space around your content. Using margin and padding will keep your elements flexible no matter what the content inside does. #### When fixed widths are appropriate -Obviously there are cases when a fixed width is appropriate. It's hard to make a universal rule, but in general the smaller your widths the more likely it's fine to make them fixed. For example, a `32px` icon on your page isn't going to benefit from using `max-width` because you probably _don't_ want it to shrink. Likewise a `250px` sidebar probably needs to _always_ be `250px`. As with anything you just need to consider your options and pick what seems to be the most appropriate. + +Obviously there are cases when a fixed width is appropriate. It's hard to make a universal rule, but in general the smaller your widths the more likely it's fine to make them fixed. For example, a `32px` icon on your page isn't going to benefit from using `max-width` because you probably *don't* want it to shrink. Likewise a `250px` sidebar probably needs to *always* be `250px`. As with anything you just need to consider your options and pick what seems to be the most appropriate. ### Use flex and grid -Here's a statement so obvious that it sounds like a joke: flexbox was _created_ to enable the creation of flexible layouts. Using flex and grid doesn't necessarily guarantee perfect responsiveness, but they are really helpful tools. You've already learned about the relevant properties here, but things like `flex-wrap` and grid's `minmax`, `auto-fill` and similar properties can make some impressively responsive layouts without much extra work. + +Here's a statement so obvious that it sounds like a joke: flexbox was *created* to enable the creation of flexible layouts. Using flex and grid doesn't necessarily guarantee perfect responsiveness, but they are really helpful tools. You've already learned about the relevant properties here, but things like `flex-wrap` and grid's `minmax`, `auto-fill` and similar properties can make some impressively responsive layouts without much extra work. ### Assignment +
1. Read ["Using the viewport meta tag"](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) on MDN to get a little more background and detail about the viewport meta tag and the nature of screen resolutions. 2. [Using Percentages in CSS](https://codyloyd.com/2021/percentages/) is an article that tackles another common pitfall. @@ -62,14 +69,16 @@ Here's a statement so obvious that it sounds like a joke: flexbox was _created_
### Knowledge check + This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer. -* [Why should you avoid fixed width?](#fixed-width) -* [Why should you avoid fixed height?](#fixed-height) -* [In what situations might it be appropriate to use a fixed height or width?](#when-fixed-widths-are-appropriate) -* [Why should you avoid percentages?](https://codyloyd.com/2021/percentages/) +- [Why should you avoid fixed width?](#fixed-width) +- [Why should you avoid fixed height?](#fixed-height) +- [In what situations might it be appropriate to use a fixed height or width?](#when-fixed-widths-are-appropriate) +- [Why should you avoid percentages?](https://codyloyd.com/2021/percentages/) ### Additional resources + This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something. -* [This free course on Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) by Kevin Powell provides great practice to work on your responsive layout chops. +- [This free course on Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) by Kevin Powell provides great practice to work on your responsive layout chops. From e8da5d018a74cf1f54cc474cbb876ca6f65876e0 Mon Sep 17 00:00:00 2001 From: Rose Date: Tue, 23 Jan 2024 22:09:54 -0500 Subject: [PATCH 3/4] Fix last lint lesson files errors --- .../responsive_design/natural_responsiveness.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/advanced_html_css/responsive_design/natural_responsiveness.md b/advanced_html_css/responsive_design/natural_responsiveness.md index 0ed1fdb4398..66e27a6e64a 100644 --- a/advanced_html_css/responsive_design/natural_responsiveness.md +++ b/advanced_html_css/responsive_design/natural_responsiveness.md @@ -2,9 +2,9 @@ The first step to making responsive websites is using techniques that are *naturally* flexible. In a later lesson you'll learn how to completely rearrange items on a page based on screen size, but in most cases, it's preferable to rely on tools like flexbox and grid to make your pages work on a wide range of screens first. -### Learning outcomes +### Lesson overview -* You'll learn a few tips for keeping your sites naturally responsive +- You'll learn a few tips for keeping your sites naturally responsive Plain HTML, with no CSS is responsive. [Make sure to read the page](https://codyloyd.github.io/responsive-html/), and shrink your browser down to the size of a phone. It works perfectly! You could read that site on an apple watch. @@ -81,4 +81,4 @@ This section contains questions for you to check your understanding of this less This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something. -- [This free course on Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) by Kevin Powell provides great practice to work on your responsive layout chops. +- [This free course on Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) by Kevin Powell provides great practice to work on your responsive layout chops. From e46c1e7296656bd1f59bbc618084ad0ce64aed2f Mon Sep 17 00:00:00 2001 From: Rose Date: Tue, 23 Jan 2024 22:12:34 -0500 Subject: [PATCH 4/4] Add trailing space --- advanced_html_css/responsive_design/natural_responsiveness.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/advanced_html_css/responsive_design/natural_responsiveness.md b/advanced_html_css/responsive_design/natural_responsiveness.md index 66e27a6e64a..0e305f07688 100644 --- a/advanced_html_css/responsive_design/natural_responsiveness.md +++ b/advanced_html_css/responsive_design/natural_responsiveness.md @@ -81,4 +81,4 @@ This section contains questions for you to check your understanding of this less This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something. -- [This free course on Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) by Kevin Powell provides great practice to work on your responsive layout chops. +- [This free course on Conquering Responsive Layouts](https://courses.kevinpowell.co/conquering-responsive-layouts) by Kevin Powell provides great practice to work on your responsive layout chops.