From 1cdf18ba8c4fd68ebee2bcc265b7371f22dfa6d5 Mon Sep 17 00:00:00 2001 From: Brandon Lopes <49502102+brandonlopes@users.noreply.github.com> Date: Sat, 4 Nov 2023 19:57:39 -0400 Subject: [PATCH] updated list items per layout style guide (#26671) --- .../html-foundations/html-boilerplate.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/foundations/html_css/html-foundations/html-boilerplate.md b/foundations/html_css/html-foundations/html-boilerplate.md index 7bd39dfaded..99e3512f18a 100644 --- a/foundations/html_css/html-foundations/html-boilerplate.md +++ b/foundations/html_css/html-foundations/html-boilerplate.md @@ -6,8 +6,8 @@ All HTML documents have the same basic structure or boilerplate that needs to be This section contains a general overview of topics that you will learn in this lesson. -* How to write the basic boilerplate for an HTML document -* How to open HTML documents in your browser +- How to write the basic boilerplate for an HTML document. +- How to open HTML documents in your browser. ### Creating an HTML file @@ -117,14 +117,14 @@ The HTML boilerplate in the `index.html` file is complete at this point, but how > A note: > In order to avoid branching our lesson's instructions to accommodate for all of the differences between browsers, we are going to be using Google Chrome as our primary browser for the remainder of this course. All references to the browser will pertain specifically to Google Chrome. We **strongly** suggest that you use Google Chrome for all of your testing going forward. -1. You can drag and drop an HTML file from your text editor into the address bar of your browser. +1. You can drag and drop an HTML file from your text editor into the address bar of your browser. -2. You can find the HTML file in your file system and then double click it. This will open up the file in the default browser your system uses. +2. You can find the HTML file in your file system and then double click it. This will open up the file in the default browser your system uses. -3. You can use the terminal to open the file in your browser. +3. You can use the terminal to open the file in your browser. - * `Ubuntu` - Navigate to the directory containing the file and type `google-chrome index.html` - * `macOS` - Navigate to the directory containing the file and type `open ./index.html` + - `Ubuntu` - Navigate to the directory containing the file and type `google-chrome index.html` + - `macOS` - Navigate to the directory containing the file and type `open ./index.html` Using one of the methods above, open up the `index.html` file we have been working on. You'll notice the screen is blank. This is because we don't have anything in our body to display. @@ -156,11 +156,11 @@ But it's still good to know how to write the boilerplate yourself in case you fi
-1. Watch and follow along to Kevin Powell's brilliant [Building Your First Web Page video](https://youtu.be/V8UAEoOvqFg?list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&t=93) +1. Watch and follow along to Kevin Powell's brilliant [Building Your First Web Page video](https://youtu.be/V8UAEoOvqFg?list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&t=93) -2. Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don't worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. +2. Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don't worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. -3. Run your boilerplate through the W3 [HTML validator](https://validator.w3.org/) or alternatively this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren't aware of, such as missing closing tags and extra spaces in your HTML. +3. Run your boilerplate through the W3 [HTML validator](https://validator.w3.org/) or alternatively this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren't aware of, such as missing closing tags and extra spaces in your HTML.
@@ -168,16 +168,16 @@ But it's still good to know how to write the boilerplate yourself in case you fi 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. -* [What is the purpose of the doctype declaration?](#the-doctype) -* [What is the HTML element?](#html-element) -* [What is the purpose of the head element?](#head-element) -* [What is the purpose of the body element?](#body-element) +- [What is the purpose of the doctype declaration?](#the-doctype) +- [What is the HTML element?](#html-element) +- [What is the purpose of the head element?](#head-element) +- [What is the purpose of the body element?](#body-element) ### Additional resources This section contains helpful links to related content. It isn’t required, so consider it supplemental. -* Another option for opening your HTML pages in the browser is using the [live server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) with VSCode. This will open your HTML document and automatically refresh it every time you save the document. However, we recommend not using this extension and instead doing it the old-fashioned way, by opening the page and refreshing the page manually in the browser for your first few HTML projects. This way, you can get used to that process and won't become reliant on extensions right away. One reason is that there may be subtle differences when using extensions. For example, live server will always use UTF-8 character encoding and not the charset value defined in your `` element. This could potentially hide some characters on your site as they will not be encoded the way you expect. +- Another option for opening your HTML pages in the browser is using the [live server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) with VSCode. This will open your HTML document and automatically refresh it every time you save the document. However, we recommend not using this extension and instead doing it the old-fashioned way, by opening the page and refreshing the page manually in the browser for your first few HTML projects. This way, you can get used to that process and won't become reliant on extensions right away. One reason is that there may be subtle differences when using extensions. For example, live server will always use UTF-8 character encoding and not the charset value defined in your `` element. This could potentially hide some characters on your site as they will not be encoded the way you expect. -* If you wish, you can add the `lang` attribute to individual elements throughout the webpage. Read through [this doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) for a better understanding of the `lang` attribute. +- If you wish, you can add the `lang` attribute to individual elements throughout the webpage. Read through [this doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) for a better understanding of the `lang` attribute.