Feature: Update lesson/project templates and examples (TheOdinProject…

…#27593)

* Update lesson-template to match current lint rules

* Update lesson-example to match current lint rules

* Update project-example to match current lint rules

* Update project-template to match current lint rules

templates/lesson-example.md

@@ -16,34 +16,38 @@ This section contains a general overview of topics that you will learn in this l
 The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.
 
 <div class="lesson-note" markdown="1">
-<h4>Everything is a box </h4>
-Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another. 
+
+#### Everything is a box
+
+Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another.
+
 </div>
 
-### Another section 
+### Another section
 
 This section isn't in the original lesson, but we wanted to show what adding an additional custom section would look like.
 
 ### Assignment
 
 <div class="lesson-content__panel" markdown="1">
 
-1. Because the box model concept is so incredibly fundamental, check out [this lesson from MDN](#). It covers the same material as the video above, but it goes a little further in depth. Pay close attention to the examples and take the time to experiment with their in-browser editor!
+1. Because the box model concept is so incredibly fundamental, check out this [MDN lesson on the box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model). It covers the same material as the video above, but it goes a little further in depth. Pay close attention to the examples and take the time to experiment with their in-browser editor!
 
    - This isn't in the original lesson, but if we wanted users to only read certain sections, we would include them here. For example, we could tell users to only read the below sections in the MDN page linked above.
    - Parts of a box
    - The standard CSS box model
    - The alternative CSS box model
+
 </div>
 
 ### Knowledge check
 
-This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
+The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
 
 - [From inside to outside, what is the order of box-model properties?](#the-box-model)
 
 ### Additional resources
 
-This section contains helpful links to related content. It isn’t required, so consider it supplemental.
+This section contains helpful links to related content. It isn't required, so consider it supplemental.
 
 - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.

templates/lesson-template.md

@@ -15,22 +15,33 @@ CUSTOM SECTION CONTENT.
 #### Note box variations
 
 <div class="lesson-note" markdown="1">
-<h4>A sample title</h4>
+
+#### A sample title
+
 A sample note box.
+
 </div>
 
 <div class="lesson-note lesson-note--tip" markdown="1">
-<h4>h4 for title is recommended</h4>
+
+#### level 4 heading for title is recommended
+
 A sample note box, variation: tip.
+
 </div>
 
 <div class="lesson-note lesson-note--warning" markdown="1">
-<h4>But title is also optional</h4>
+
+#### But title is also optional
+
 A sample note box, variation: warning.
+
 </div>
 
 <div class="lesson-note lesson-note--critical" markdown="1">
+
 A sample note box, variation: critical.
+
 </div>
 
 ### Assignment
@@ -39,18 +50,19 @@ A sample note box, variation: critical.
 
 1. A RESOURCE ITEM
    - AN INSTRUCTION ITEM
-2. A PRACTICE ITEM
+1. A PRACTICE ITEM
    - A TASK ITEM
+
 </div>
 
 ### Knowledge check
 
-This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.
+The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.
 
 - [A KNOWLEDGE CHECK QUESTION](A-KNOWLEDGE-CHECK-URL)
 
 ### Additional resources
 
-This section contains helpful links to related content. It isn’t required, so consider it supplemental.
+This section contains helpful links to related content. It isn't required, so consider it supplemental.
 
 - It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.

templates/project-example.md

@@ -1,4 +1,4 @@
-### Introduction 
+### Introduction
 
 This example takes snippets from the Landing Page project in Foundations, and is meant to show how an authored project might look after following the style guide.
 
@@ -17,7 +17,7 @@ As we did in the Recipe project, go ahead and set up a git repository before beg
    - The font that’s being used in the images is roboto.
    - Hero text is the statement that appears at the top of a web page.
 
-2. There are many ways to tackle a project like this, and it can be overwhelming to look at a blank HTML document and not know where to start. Our suggestion: take it one section at a time. The website you’re creating has 4 main sections (and a footer), so pick one and get it into pretty good shape before moving on. Starting at the top is always a solid plan.
+1. There are many ways to tackle a project like this, and it can be overwhelming to look at a blank HTML document and not know where to start. Our suggestion: take it one section at a time. The website you’re creating has 4 main sections (and a footer), so pick one and get it into pretty good shape before moving on. Starting at the top is always a solid plan.
 
 #### Extra credit
 

templates/project-template.md

@@ -1,4 +1,4 @@
-### Introduction 
+### Introduction
 
 A BRIEF INTRODUCTION.