Linting issues fixed and one missed link text updated as requested

advanced_html_css/animation/keyframes.md

@@ -27,10 +27,13 @@ All in all, both animations and transitions have their use, so in addition to co
 Let's see an animation in action to see what we've been talking about.
 
 <p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="jOGENZz" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+
   <span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/jOGENZz">
   keyframes 1 longhand</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>
+
 </p>
+
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
 Note how the animation is already running and how it keeps repeating itself. We'll cover that `@keyframes` rule at the bottom of our example in a bit, so for now focus on the actual animation properties used in the example above:
@@ -80,10 +83,13 @@ The `@keyframes` at-rule also defines one animation cycle. So if we were to chan
 Now it's time to introduce the shorthand notation for our animation properties and glimpse a little into the added flexibility of the keyframe notation. Check out the live example below then have a look at the notation.
 
 <p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="zYExOLQ" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+
   <span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/zYExOLQ">
   keyframes 2 shorthand</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>
+
 </p>
+
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
 ```css

advanced_html_css/responsive_design/natural_responsiveness.md

@@ -6,7 +6,9 @@ The first step to making responsive websites is using techniques that are *natur
 
 This section contains a general overview of topics that you will learn in this lesson.
 
-1. You'll learn a few tips for keeping your sites naturally responsive.
+- You'll learn a few tips for keeping your sites naturally responsive.
+
+### Not everything needs CSS
 
 Plain HTML, with no CSS is responsive. Visit this [HTML-only page with no CSS](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.
 
@@ -37,19 +39,25 @@ Obviously the context will determine what works in a given situation, but an eas
 In the following example, notice how the <span id='fixed-width'>fixed width</span> causes our div to overflow the screen! Change it to `max-width` and watch it shrink down to fit the preview screen! Click 'Fork on CodePen', then 'Save', and navigate to the 'Open Live View in a New Window' icon at the bottom to see it in full window size. Try changing the size of the window to see how `max-width` works. When a `max-width` is defined, the element will not exceed that width but will shrink if the screen is too small to accommodate it.
 
 <p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="GRMpreM" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+
   <span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/GRMpreM">
   max-width | CSS Responsiveness</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>
+
 </p>
+
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
 This example shown below demonstrates the problem with <span id='fixed-height'>static heights.</span> On a full-sized screen the text would fit inside the pink box just fine, but here on this cramped embed, it overflows! What we want here is for the div to be `300px` in most cases, but to grow instead of causing an overflow when the text gets cramped. In this case changing `height: 300px` to `min-height: 300px` will fix the issue.
 
 <p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="css,result" data-slug-hash="qBjxVYg" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+
   <span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/qBjxVYg">
   height | CSS Responsiveness</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>
+
 </p>
+
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
 #### Avoid heights altogether
@@ -67,9 +75,11 @@ Here's a statement so obvious that it sounds like a joke: flexbox was *created*
 ### 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. Don't focus too much on the `@media` parts, as we will cover media queries very soon.
-3. [minmax() in auto-fill repeating tracks](https://gridbyexample.com/examples/example28/) demonstrates a really nice responsive grid feature.
+1. [Using Percentages in CSS](https://codyloyd.com/2021/percentages/) is an article that tackles another common pitfall. Don't focus too much on the `@media` parts, as we will cover media queries very soon.
+1. [minmax() in auto-fill repeating tracks](https://gridbyexample.com/examples/example28/) demonstrates a really nice responsive grid feature.
+
 </div>
 
 ### Knowledge check

advanced_html_css/responsive_design/project_homepage.md

@@ -2,12 +2,14 @@
 
 For your final HTML/CSS project, you're going to create a responsive homepage, something you might find on a portfolio site of sorts. When you get to the point that you want to start sharing your work, or applying for jobs, it's useful to have a well-designed portfolio to share so take this as an opportunity to practice the more advanced HTML and CSS concepts you have learnt!
 
-Similarly to landing page and admin dashboard from previous projects, you are tasked to build a given design brief. We're providing a full design in 3 different sizes, full desktop, tablet and mobile, and this is the first real project where you should take your time and make sure that it looks acceptable at _any_ screen size.
+Similarly to landing page and admin dashboard from previous projects, you are tasked to build a given design brief. We're providing a full design in 3 different sizes, full desktop, tablet and mobile, and this is the first real project where you should take your time and make sure that it looks acceptable at *any* screen size.
 
 Feel free to pick your own fonts and colors and use something other than a stock-photo for your header. The main focus is on achieving the specified layouts and responsive behaviour rather than a complete portfolio.
 
 <div class="lesson-note" markdown="1">
+
 Many of the most liked submissions will have come from when this project used to be a bit more personal, and some people used it as an opportunity to make their own portfolio website. Many of these likely will have been updated over time and so no longer reflect the current state and goal of this project.
+
 </div>
 
 ### Assignment
@@ -17,21 +19,21 @@ Many of the most liked submissions will have come from when this project used to
 #### Step 1: Set up and planning
 
 1. Set up your HTML and CSS files with some dummy content, just to make sure you have everything linked correctly.
-2. Download a full-resolution copy of the design files ([desktop design file](https://cdn.statically.io/gh/TheOdinProject/curriculum/1c8b5c739efd263e8cc48703988b18d6e3afe034/advanced_html_css/responsive-design/project_personal_portfolio/imgs/portfolio.png), [tablet design file](https://cdn.statically.io/gh/TheOdinProject/curriculum/1c8b5c739efd263e8cc48703988b18d6e3afe034/advanced_html_css/responsive-design/project_personal_portfolio/imgs/portfolio%20tablet.png), [mobile design file](https://cdn.statically.io/gh/TheOdinProject/curriculum/1c8b5c739efd263e8cc48703988b18d6e3afe034/advanced_html_css/responsive-design/project_personal_portfolio/imgs/portfolio%20mobile.png)), and get a general idea for how you're going to need to lay things out in your HTML document.
+1. Download a full-resolution copy of the design files ([desktop design file](https://cdn.statically.io/gh/TheOdinProject/curriculum/1c8b5c739efd263e8cc48703988b18d6e3afe034/advanced_html_css/responsive-design/project_personal_portfolio/imgs/portfolio.png), [tablet design file](https://cdn.statically.io/gh/TheOdinProject/curriculum/1c8b5c739efd263e8cc48703988b18d6e3afe034/advanced_html_css/responsive-design/project_personal_portfolio/imgs/portfolio%20tablet.png), [mobile design file](https://cdn.statically.io/gh/TheOdinProject/curriculum/1c8b5c739efd263e8cc48703988b18d6e3afe034/advanced_html_css/responsive-design/project_personal_portfolio/imgs/portfolio%20mobile.png)), and get a general idea for how you're going to need to lay things out in your HTML document.
 
 #### Step 2: Gather assets
 
 1. The portraits we've used in the design files are stock photos downloaded from [pexels.com](https://www.pexels.com/). If you don't have a picture of yourself handy, feel free to go grab a placeholder for now.
-2. Select your fonts! We're using `Playfair Display` and `Roboto` in the design, both available with Google fonts.
-3. In the design we have icon-links for GitHub, LinkedIn and X (formerly known as Twitter). Obviously feel free to add whatever links you want to your own site. We got those icons from [https://devicon.dev/](https://devicon.dev/).
-4. Other icons (phone, email and external link) were downloaded as SVGs from [https://materialdesignicons.com/](https://materialdesignicons.com/).
+1. Select your fonts! We're using `Playfair Display` and `Roboto` in the design, both available with Google fonts.
+1. In the design we have icon-links for GitHub, LinkedIn and X (formerly known as Twitter). Obviously feel free to add whatever links you want to your own site. We got those icons from [https://devicon.dev/](https://devicon.dev/).
+1. Other icons (phone, email and external link) were downloaded as SVGs from [https://materialdesignicons.com/](https://materialdesignicons.com/).
 
 #### Step 3: Some tips!
 
 1. As you might expect, you can organize your work on this project however you please. We've given you many tips over the past several lessons, and you are likely already comfortable starting from a blank page.
-2. If you like being told what to do: The author of this lesson feels most comfortable starting out with the larger sections of the layout, and then working from the top of the page to the bottom. In other words, get the various sections in more or less the right place (header, projects, contact etc.) while ignoring a lot of specific style and content details, then go back through from the top-to-bottom filling-in, styling and cleaning up everything.
-3. It doesn't matter when or how you accomplish the responsiveness of this project. There are people who will tell you that you should always start with the mobile experience and then use media-queries to tell your layout how to expand. The 'mobile-first' crew _does_ have some good points (Google it!) but in the end, how you accomplish it doesn't matter as long as it works. Good luck!
-4. When you're done, don't forget to push it to GitHub, and use GitHub Pages to publish it to the world! You should be proud of what you've accomplished here!
+1. If you like being told what to do: The author of this lesson feels most comfortable starting out with the larger sections of the layout, and then working from the top of the page to the bottom. In other words, get the various sections in more or less the right place (header, projects, contact etc.) while ignoring a lot of specific style and content details, then go back through from the top-to-bottom filling-in, styling and cleaning up everything.
+1. It doesn't matter when or how you accomplish the responsiveness of this project. There are people who will tell you that you should always start with the mobile experience and then use media-queries to tell your layout how to expand. The 'mobile-first' crew *does* have some good points (Google it!) but in the end, how you accomplish it doesn't matter as long as it works. Good luck!
+1. When you're done, don't forget to push it to GitHub, and use GitHub Pages to publish it to the world! You should be proud of what you've accomplished here!
 
 #### Step 4: Give your feedback