Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Natural Responsiveness Adv. HTML / CSS: Information behind a separate link #27149

Merged
merged 6 commits into from
Jan 24, 2024
Merged

Natural Responsiveness Adv. HTML / CSS: Information behind a separate link #27149

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b53167a
Information-behind-a-separate-link
rosecodez Jan 18, 2024
a5ce9b7
Merge branch 'TheOdinProject:main' into Information-behind-a-separate…
rosecodez Jan 24, 2024
83640fc
Fix lint lesson errors
rosecodez Jan 24, 2024
daba607
Merge branch 'Information-behind-a-separate-link' of github.com:rosec…
rosecodez Jan 24, 2024
e8da5d0
Fix last lint lesson files errors
rosecodez Jan 24, 2024
e46c1e7
Add trailing space
rosecodez Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 25 additions & 16 deletions advanced_html_css/responsive_design/natural_responsiveness.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

### Learning outcomes
* You'll learn a few tips for keeping your sites naturally responsive
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.

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.
### Lesson overview

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.
- 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.

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 `<head>` of your HTML file in just about every project you work on.

~~~html
```html
<meta name="viewport" content="width=device-width, initial-scale=1">
~~~
```

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!

Expand Down Expand Up @@ -46,30 +49,36 @@ This example shown below demonstrates the problem with <span id='fixed-height'>s
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### 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

<div class="lesson-content__panel" markdown="1">
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.
3. [minmax() in auto-fill repeating tracks](https://gridbyexample.com/examples/example28/) demonstrates a really nice responsive grid feature.
</div>

### 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.