You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href=\"/en-US/docs/Learn/Accessibility\">previous articles in the course</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href=\"/en-US/docs/Learn/Accessibility\">previous articles in the course</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test basic knowledge of accessibility fundamentals.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, and understanding of <a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">what accessibility is</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, and understanding of <a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">what accessibility is</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with using CSS and JavaScript appropriately in your web documents to maximise accessibility and not detract from it.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML (see <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an understanding of <a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">what accessibility is</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML (see <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an understanding of <a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">what accessibility is</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with the features of HTML that have accessibility benefits and how to use them appropriately in your web documents.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, and an understanding of the <a href=\"/en-US/docs/Learn/Accessibility\">previous articles in the course</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, and an understanding of the <a href=\"/en-US/docs/Learn/Accessibility\">previous articles in the course</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what problems exist with accessibility on mobile devices, and how to overcome them.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of <a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">what accessibility is</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of <a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">what accessibility is</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the accessibility issues behind multimedia, and how to overcome them.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href=\"/en-US/docs/Learn/Accessibility\">previous articles in the course</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href=\"/en-US/docs/Learn/Accessibility\">previous articles in the course</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with WAI-ARIA, and how it can be used to provide useful additional semantics to enhance accessibility where required.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with accessibility, including what it is, and how it affects you as a web developer.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should already know about<a href=\"/en-US/docs/Learn/Common_questions/What_software_do_I_need\"> various software you need to build a website</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should already know about<a href=\"/en-US/docs/Learn/Common_questions/What_software_do_I_need\"> various software you need to build a website</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to choose a text editor that best suits your needs as a web developer.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You need to know how to <a href=\"/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server\">upload files to a web server</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You need to know how to <a href=\"/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server\">upload files to a web server</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>You will learn how to diagnose and resolve some basic issues you can run into with your website.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Make sure you've already thought about <a href=\"/en-US/docs/Learn/Common_questions/Thinking_before_coding\">what you want to accomplish</a> with your web project.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Make sure you've already thought about <a href=\"/en-US/docs/Learn/Common_questions/Thinking_before_coding\">what you want to accomplish</a> with your web project.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn where to put things on your webpages, and how to put them there.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should first read <a href=\"/en-US/docs/Learn/Common_questions/What_is_accessibility\">What is accessibility?</a>, since we don't cover accessibility in detail here.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should first read <a href=\"/en-US/docs/Learn/Common_questions/What_is_accessibility\">What is accessibility?</a>, since we don't cover accessibility in detail here.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Universal design means design for everybody, regardless of disabilities or technical constraints. This article lists the most important quick-wins for universal design.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>None, but we encourage you to read the <a href=\"/en-US/docs/Learn/Common_questions/Thinking_before_coding\">Article on setting project goals</a> first</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>None, but we encourage you to read the <a href=\"/en-US/docs/Learn/Common_questions/Thinking_before_coding\">Article on setting project goals</a> first</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should already understand <a href=\"/en-US/docs/Learn/Common_questions/What_software_do_I_need\">what software you need</a>, the difference between <a href=\"/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines\">a webpage, a website, etc</a>., and what <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_domain_name\">a domain name is</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should already understand <a href=\"/en-US/docs/Learn/Common_questions/What_software_do_I_need\">what software you need</a>, the difference between <a href=\"/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines\">a webpage, a website, etc</a>., and what <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_domain_name\">a domain name is</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Review the complete process for creating a website and find out how much each step can cost.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Be able to describe the differences between a web page, a website, a web server, and a search engine.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You need to first know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>, and <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_web_server\">what a Web server is</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You need to first know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>, and <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_web_server\">what a Web server is</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>You will learn how to set up a local testing server.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>None</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn to define goals to give direction to your web project.</td></tr>"
td (116:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Record music"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Prepare some audio files usable online (Could you do this with existing web services?)"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Give people access to your music on some part of your website"
tr (114:3) => tableRow
type: "html"
value: "<td><ol><li>Record music</li><li>Prepare some audio files usable online (Could you do this with existing web services?)</li><li>Give people access to your music on some part of your website</li></ol></td>"
td (126:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Write a few articles to start the discussion"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Define how articles should look"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Publish those articles on the website (How to do this?)"
tr (124:3) => tableRow
type: "html"
value: "<td><ol><li>Write a few articles to start the discussion</li><li>Define how articles should look</li><li>Publish those articles on the website (How to do this?)</li></ol></td>"
td (136:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Provide ways for people to contact you (Email? Facebook? Phone? Mail?)"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Define how people will find those contact channels from your website"
tr (134:3) => tableRow
type: "html"
value: "<td><ol><li>Provide ways for people to contact you (Email? Facebook? Phone? Mail?)</li><li>Define how people will find those contact channels from your website</li></ol></td>"
td (145:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Create the goodies"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Store the goodies"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Find a way to handle shipping"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Find a way to handle payment"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Make a mechanism on your site for people to place orders"
tr (143:3) => tableRow
type: "html"
value: "<td><ol><li>Create the goodies</li><li>Store the goodies</li><li>Find a way to handle shipping</li><li>Find a way to handle payment</li><li>Make a mechanism on your site for people to place orders</li></ol></td>"
td (157:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Record video lessons"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Prepare video files viewable online (Again, could you do this with existing web services?)"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Give people access to your videos on some part of your website"
tr (155:3) => tableRow
type: "html"
value: "<td><ol><li>Record video lessons</li><li>Prepare video files viewable online (Again, could you do this with existing web services?)</li><li>Give people access to your videos on some part of your website</li></ol></td>"
table.standard-table (106:1) => table
type: "html"
value: "<tr><td>Let people hear your music</td><td><ol><li>Record music</li><li>Prepare some audio files usable online (Could you do this with existing web services?)</li><li>Give people access to your music on some part of your website</li></ol></td></tr>",type: "html"
value: "<tr><td>Talk about your music</td><td><ol><li>Write a few articles to start the discussion</li><li>Define how articles should look</li><li>Publish those articles on the website (How to do this?)</li></ol></td></tr>",type: "html"
value: "<tr><td>Meet other musicians</td><td><ol><li>Provide ways for people to contact you (Email? Facebook? Phone? Mail?)</li><li>Define how people will find those contact channels from your website</li></ol></td></tr>",type: "html"
value: "<tr><td>Sell goodies</td><td><ol><li>Create the goodies</li><li>Store the goodies</li><li>Find a way to handle shipping</li><li>Find a way to handle payment</li><li>Make a mechanism on your site for people to place orders</li></ol></td></tr>",type: "html"
value: "<tr><td>Teach music through videos</td><td><ol><li>Record video lessons</li><li>Prepare video files viewable online (Again, could you do this with existing web services?)</li><li>Give people access to your videos on some part of your website</li></ol></td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You must know <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_web_server\">what a web server is</a> and <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_domain_name\">how domain names work</a>. You must also know how to <a href=\"/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server\">set up a basic environment</a> and how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">write a simple webpage</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You must know <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_web_server\">what a web server is</a> and <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_domain_name\">how domain names work</a>. You must also know how to <a href=\"/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server\">set up a basic environment</a> and how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">write a simple webpage</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to push files to a server using the various file transfer tools available.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a> and be familiar with<a href=\"/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines\"> the difference between a webpage, a website, a web server, and a search engine</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a> and be familiar with<a href=\"/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines\"> the difference between a webpage, a website, a web server, and a search engine</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn about links on the web and why they matter.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>First you need to know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a> and understand <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_URL\">what URLs are</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>First you need to know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a> and understand <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_URL\">what URLs are</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn what domain names are, how they work, and why they are important.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You need to first know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>, <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_web_server\">what a Web server is</a> and <a href=\"/en-US/docs/Learn/Common_questions/What_are_hyperlinks\">the concepts behind links on the web</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You need to first know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>, <a href=\"/en-US/docs/Learn/Common_questions/What_is_a_web_server\">what a Web server is</a> and <a href=\"/en-US/docs/Learn/Common_questions/What_are_hyperlinks\">the concepts behind links on the web</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>You will learn what a URL is and how it works on the Web.</td></tr>"
tr (128:3) => tableRow
type: "html"
value: "<td>Full URL (the same as the one we used before)</td>",type: "html"
value: "<td><pre>https://developer.mozilla.org/en-US/docs/Learn</pre></td>"
td (134:5) => tableCell
type: "code"
lang:
meta:
value: "//developer.mozilla.org/en-US/docs/Learn",type: "paragraph"
summary: "With {{R2xvc3NhcnkoIkh5cGVydGV4dCIp}} and {{R2xvc3NhcnkoIkhUVFAiKQ==}}, URL is one of the key concepts of the Web. It is the mechanism used by {{R2xvc3NhcnkoIkJyb3dzZXIiLCJicm93c2VycyIp}} to retrieve any published resource on the web."
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "In this case, the browser will call that URL with the same protocol as the one used to load the document hosting that URL."
tr (132:3) => tableRow
type: "html"
value: "<td><pre>//developer.mozilla.org/en-US/docs/Learn</pre><p>In this case, the browser will call that URL with the same protocol as the one used to load the document hosting that URL.</p></td>"
td (141:5) => tableCell
type: "code"
lang:
meta:
value: "/en-US/docs/Learn",type: "paragraph"
summary: "With {{R2xvc3NhcnkoIkh5cGVydGV4dCIp}} and {{R2xvc3NhcnkoIkhUVFAiKQ==}}, URL is one of the key concepts of the Web. It is the mechanism used by {{R2xvc3NhcnkoIkJyb3dzZXIiLCJicm93c2VycyIp}} to retrieve any published resource on the web."
locale: "en-US"
rowIndex: 2
shouldWrap: true
children:
type: "text"
value: "This is the most common use case for an absolute URL within an HTML document. The browser will use the same protocol and the same domain name as the one used to load the document hosting that URL. "
type: "strong"
children:
type: "text"
value: "Note:"
type: "text"
value: " "
type: "emphasis"
children:
type: "text"
value: "it isn't possible to omit the domain name without omitting the protocol as well"
type: "text"
value: "."
tr (139:3) => tableRow
type: "html"
value: "<td><pre>/en-US/docs/Learn</pre><p>This is the most common use case for an absolute URL within an HTML document. The browser will use the same protocol and the same domain name as the one used to load the document hosting that URL. <strong>Note:</strong> <em>it isn't possible to omit the domain name without omitting the protocol as well</em>.</p></td>"
table (127:1) => table
type: "html"
value: "<tr><td>Full URL (the same as the one we used before)</td><td><pre>https://developer.mozilla.org/en-US/docs/Learn</pre></td></tr>",type: "html"
value: "<tr><td>Implicit protocol</td><td><pre>//developer.mozilla.org/en-US/docs/Learn</pre><p>In this case, the browser will call that URL with the same protocol as the one used to load the document hosting that URL.</p></td></tr>",type: "html"
value: "<tr><td>Implicit domain name</td><td><pre>/en-US/docs/Learn</pre><p>This is the most common use case for an absolute URL within an HTML document. The browser will use the same protocol and the same domain name as the one used to load the document hosting that URL. <strong>Note:</strong> <em>it isn't possible to omit the domain name without omitting the protocol as well</em>.</p></td></tr>"
tr (153:3) => tableRow
type: "html"
value: "<td>Sub-resources</td>",type: "html"
value: "<td><pre>Skills/Infrastructure/Understanding_URLs</pre><p>Because that URL does not start with <code>/</code>, the browser will attempt to find the document in a sub-directory of the one containing the current resource. So in this example, we really want to reach this URL: https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs.</p></td>"
td (162:5) => tableCell
type: "code"
lang:
meta:
value: "../CSS/display",type: "paragraph"
summary: "With {{R2xvc3NhcnkoIkh5cGVydGV4dCIp}} and {{R2xvc3NhcnkoIkhUVFAiKQ==}}, URL is one of the key concepts of the Web. It is the mechanism used by {{R2xvc3NhcnkoIkJyb3dzZXIiLCJicm93c2VycyIp}} to retrieve any published resource on the web."
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "In this case, we use the "
type: "inlineCode"
value: "../"
type: "text"
value: " writing convention — inherited from the UNIX file system world — to tell the browser we want to go up from one directory. Here we want to reach this URL: https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, which can be simplified to: https://developer.mozilla.org/en-US/docs/CSS/display."
tr (160:3) => tableRow
type: "html"
value: "<td><pre>../CSS/display</pre><p>In this case, we use the <code>../</code> writing convention — inherited from the UNIX file system world — to tell the browser we want to go up from one directory. Here we want to reach this URL: https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, which can be simplified to: https://developer.mozilla.org/en-US/docs/CSS/display.</p></td>"
table (152:1) => table
type: "html"
value: "<tr><td>Sub-resources</td><td><pre>Skills/Infrastructure/Understanding_URLs</pre><p>Because that URL does not start with <code>/</code>, the browser will attempt to find the document in a sub-directory of the one containing the current resource. So in this example, we really want to reach this URL: https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs.</p></td></tr>",type: "html"
value: "<tr><td>Going back in the directory tree</td><td><pre>../CSS/display</pre><p>In this case, we use the <code>../</code> writing convention — inherited from the UNIX file system world — to tell the browser we want to go up from one directory. Here we want to reach this URL: https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, which can be simplified to: https://developer.mozilla.org/en-US/docs/CSS/display.</p></td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should already know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>, and <a href=\"/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines\">understand the difference between a web page, a web site, a web server, and a search engine</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should already know <a href=\"/en-US/docs/Learn/Common_questions/How_does_the_Internet_work\">how the Internet works</a>, and <a href=\"/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines\">understand the difference between a web page, a web site, a web server, and a search engine</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>You will learn what a web server is and gain a general understanding of how it works.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>None.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn what accessibility is and why it matters.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should already know <a href=\"/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines\">the difference between webpages, websites, web servers, and search engines.</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn which software components you need if you want to edit, upload, or view a website.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment, you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment, you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of the CSS box model and other box-related features such as borders and backgrounds.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>) and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>) and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To get an idea about how to use some of the advanced styling effects available in modern browsers.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to style the background and border of boxes.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the cascade and specificity, and how inheritance works in CSS.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of CSS box model, and other box-related features such as implementing backgrounds.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of fundamental CSS theory, syntax and mechanics.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the importance of writing modes to modern CSS.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the way that some elements behave unusually when styled with CSS.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with CSS organization and team working.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand overflow and how to manage it.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn what attribute selectors are and how to use them.</td></tr>"
td (55:4) => tableCell
type: "paragraph"
summary: "As you know from your study of HTML, elements can have attributes that give further detail about the element being marked up. In CSS you can use attribute selectors to target elements with certain attributes. This lesson will show you how to use these very useful selectors."
locale: "en-US"
rowIndex: 3
shouldWrap: true
children:
type: "break"
type: "text"
value: "Matches elements with an "
type: "emphasis"
children:
type: "text"
value: "attr"
type: "text"
value: " attribute whose value is exactly "
type: "emphasis"
children:
type: "text"
value: "value"
type: "text"
value: ", or contains "
type: "emphasis"
children:
type: "text"
value: "value"
type: "text"
value: " in its (space separated) list of values."
tr (52:3) => tableRow
type: "html"
value: "<td><p><br>Matches elements with an <em>attr</em> attribute whose value is exactly <em>value</em>, or contains <em>value</em> in its (space separated) list of values.</p></td>"
table.standard-table (33:1) => table
type: "html"
value: "<tr><td><code>[<em>attr</em>~=<em>value</em>]</code></td><td><code>p[class~=\"special\"]</code></td><td><p><br>Matches elements with an <em>attr</em> attribute whose value is exactly <em>value</em>, or contains <em>value</em> in its (space separated) list of values.</p></td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the different combinator selectors that can be used in CSS.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how CSS selectors work in detail.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the pseudo-class and pseudo-element selectors.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the different CSS selectors we can use to apply CSS to a document.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the different ways we can size things in CSS.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), knowledge of <a href=\"/en-US/docs/Learn/HTML/Tables\">HTML tables</a>, and an idea of how CSS works (study CSS first steps.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), knowledge of <a href=\"/en-US/docs/Learn/HTML/Tables\">HTML tables</a>, and an idea of how CSS works (study CSS first steps.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to effectively style HTML tables.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the CSS Box Model, what makes up the box model and how to switch to the alternate model.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the different types of values and units used in CSS properties.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to use the Flexbox layout system to create web layouts.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to create floated features on webpages and to use the clear property as well as other methods for clearing floats.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>) and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">Styling boxes</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>) and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">Styling boxes</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the fundamental concepts of grid layout as well as how to implement it with CSS Grid.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>The basics of HTML (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>The basics of HTML (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To give you an overview of CSS page layout techniques. Each technique can be learned in greater detail in subsequent tutorials.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">Styling boxes</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">Styling boxes</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the fundamental concepts behind the grid layout systems used prior to CSS Grid Layout being available in browsers.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">CSS building blocks</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">CSS building blocks</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to use media queries, and the most common approach for using them to create responsive designs.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to create multiple-column layout on webpages, such as you might find in a newspaper.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>The basics of HTML (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>The basics of HTML (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To explain how browsers layout web pages by default, before we begin to make changes.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how CSS positioning works.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of How CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To get an idea of the practicalities of positioning</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">CSS building blocks</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">CSS building blocks</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the fundamental concepts and history of responsive design.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">Styling boxes</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of how CSS works (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a> and <a href=\"/en-US/docs/Learn/CSS/Building_blocks\">Styling boxes</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to provide support for your layouts on older browsers that might not support the features you want to use.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, and HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the basics of linking a CSS document to an HTML file, and be able to do simple text formatting with CSS.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of <a href=\"/en-US/docs/Learn/CSS/First_steps/How_CSS_works\">How CSS works</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an idea of <a href=\"/en-US/docs/Learn/CSS/First_steps/How_CSS_works\">How CSS works</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn CSS's fundamental syntax structures in detail.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, and HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the basics of how CSS and HTML are parsed by the browser, and what happens when a browser encounters CSS it does not understand.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have worked through the rest of the CSS basics module, and also have an understanding of HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have worked through the rest of the CSS basics module, and also have an understanding of HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To have a play with some CSS and test your new-found knowledge.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), CSS basics (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn the fundamental properties and techniques needed to style text on web pages.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), CSS basics (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>), <a href=\"/en-US/docs/Learn/CSS/Styling_text/Fundamentals\">CSS text and font fundamentals</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), CSS basics (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>), <a href=\"/en-US/docs/Learn/CSS/Styling_text/Fundamentals\">CSS text and font fundamentals</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to style link states, and how to use links effectively in common UI features like navigation menus.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), CSS basics (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>), <a href=\"/en-US/docs/Learn/CSS/Styling_text/Fundamentals\">CSS text and font fundamentals</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), CSS basics (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>), <a href=\"/en-US/docs/Learn/CSS/Styling_text/Fundamentals\">CSS text and font fundamentals</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To become familiar with the best practices and properties related to styling lists.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of CSS text styling techniques.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), CSS basics (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>), <a href=\"/en-US/docs/Learn/CSS/Styling_text/Fundamentals\">CSS text and font fundamentals</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, HTML basics (study <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), CSS basics (study <a href=\"/en-US/docs/Learn/CSS/First_steps\">Introduction to CSS</a>), <a href=\"/en-US/docs/Learn/CSS/Styling_text/Fundamentals\">CSS text and font fundamentals</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to apply web fonts to a web page, using either a third party service, or by writing your own code.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, and a basic understanding of <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">HTML</a> and <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic understanding of <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">HTML</a> and <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what parts of forms are hard to style, and why; to learn what can be done to customize them.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">understanding of HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using HTML.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Computer literacy, a reasonable understanding of <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what client-side form validation is, why it's important, and how to apply various techniques to implement it.</td></tr>"
type: "html"
value: "<td colspan=\"3\"><a href=\"/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_1\">Check out the source code</a></td>"
table (284:1) => table
type: "html"
value: "<tr><td colspan=\"3\"><a href=\"/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_1\">Check out the source code</a></td></tr>"
tr (393:3) => tableRow
type: "html"
value: "<td colspan=\"2\"><a href=\"/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2\">Check out the source code</a></td>"
table (381:1) => table
type: "html"
value: "<tr><td colspan=\"2\"><a href=\"/en-US/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2\">Check out the source code</a></td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">understanding of HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to structure HTML forms and give them semantics so they are usable and accessible.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">understanding of HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the newer input type values available to create native form controls, and how to implement them using HTML.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">understanding of HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the non-<code><input></code> form features, and how to implement them using HTML.</td></tr>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use "
type: "inlineCode"
value: "-webkit-appearance:none"
type: "text"
value: " to be able to apply this property to search fields."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Windows 7, Internet Explorer 9 does not apply the border unless "
type: "inlineCode"
value: "background:none"
type: "text"
value: " is applied."
tr (98:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiaGVpZ2h0Iik=}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li><li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td>"
td (113:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use "
type: "inlineCode"
value: "-webkit-appearance:none"
type: "text"
value: " to be able to apply this property to search fields."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Windows 7, Internet Explorer 9 does not apply the border unless "
type: "inlineCode"
value: "background:none"
type: "text"
value: " is applied."
tr (109:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyIik=}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li><li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use "
type: "inlineCode"
value: "-webkit-appearance:none"
type: "text"
value: " to be able to apply this property to search fields."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Windows 7, Internet Explorer 9 does not apply the border unless "
type: "inlineCode"
value: "background:none"
type: "text"
value: " is applied."
tr (126:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigicGFkZGluZyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li><li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td>"
tr (139:3) => tableRow
type: "html"
value: "<th colspan=\"4\" scope=\"col\"><em>Text and font</em></th>"
td (146:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "If the {{Y3NzeHJlZigiYm9yZGVyLWNvbG9yIik=}} property is not set, some WebKit based browsers will apply the {{Y3NzeHJlZigiY29sb3IiKQ==}} property to the border as well as the font on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInRleHRhcmVhIik=}}"
type: "text"
value: "s."
tr (142:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiY29sb3IiKQ==}}<sup>[1]</sup></th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>If the {{Y3NzeHJlZigiYm9yZGVyLWNvbG9yIik=}} property is not set, some WebKit based browsers will apply the {{Y3NzeHJlZigiY29sb3IiKQ==}} property to the border as well as the font on <code>{{aHRtbGVsZW1lbnQoInRleHRhcmVhIik=}}</code>s.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 supports this property only on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInRleHRhcmVhIik=}}"
type: "text"
value: "s, whereas Opera only supports it on single line text fields."
tr (176:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1pbmRlbnQiKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 supports this property only on <code>{{aHRtbGVsZW1lbnQoInRleHRhcmVhIik=}}</code>s, whereas Opera only supports it on single line text fields.</li></ol></td>"
type: "html"
value: "<th colspan=\"4\" scope=\"col\"><em>Border and background</em></th>"
td (213:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use "
type: "inlineCode"
value: "-webkit-appearance:none"
type: "text"
value: " to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless "
type: "inlineCode"
value: "background:none"
type: "text"
value: " is applied."
tr (209:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYmFja2dyb3VuZCIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td>"
td (223:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use "
type: "inlineCode"
value: "-webkit-appearance:none"
type: "text"
value: " to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless "
type: "inlineCode"
value: "background:none"
type: "text"
value: " is applied."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set."
tr (219:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li><li>On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set.</li></ol></td>"
td (234:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 does not support this property."
tr (230:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm94LXNoYWRvdyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 does not support this property.</li></ol></td>"
table (79:1) => table
type: "html"
value: "<tr><th scope=\"col\">Property</th><th scope=\"col\" style=\"text-align: center;\">N</th><th scope=\"col\" style=\"text-align: center;\">T</th><th scope=\"col\">Note</th></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>CSS box model</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigid2lkdGgiKQ==}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiaGVpZ2h0Iik=}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li><li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyIik=}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li><li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigibWFyZ2luIik=}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigicGFkZGluZyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li><li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>Text and font</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiY29sb3IiKQ==}}<sup>[1]</sup></th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td><ol><li>If the {{Y3NzeHJlZigiYm9yZGVyLWNvbG9yIik=}} property is not set, some WebKit based browsers will apply the {{Y3NzeHJlZigiY29sb3IiKQ==}} property to the border as well as the font on <code>{{aHRtbGVsZW1lbnQoInRleHRhcmVhIik=}}</code>s.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiZm9udCIp}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td>See the note about {{Y3NzeHJlZigibGluZS1oZWlnaHQiKQ==}}</td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigibGV0dGVyLXNwYWNpbmciKQ==}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1hbGlnbiIp}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1kZWNvcmF0aW9uIik=}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial</td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial</td><td>See the note about Opera</td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1pbmRlbnQiKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>IE9 supports this property only on <code>{{aHRtbGVsZW1lbnQoInRleHRhcmVhIik=}}</code>s, whereas Opera only supports it on single line text fields.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1vdmVyZmxvdyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial</td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1zaGFkb3ciKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial</td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC10cmFuc2Zvcm0iKQ==}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>Border and background</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYmFja2dyb3VuZCIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td><ol><li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li><li>On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm94LXNoYWRvdyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>IE9 does not support this property.</li></ol></td></tr>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "This property is not applied on WebKit based browsers on Mac OSX or iOS."
tr (266:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiaGVpZ2h0Iik=}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "This property is not applied on WebKit based browsers on Mac OSX or iOS."
tr (288:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigicGFkZGluZyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td>",type: "html"
value: "<td><ol><li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li></ol></td>"
tr (300:3) => tableRow
type: "html"
value: "<th colspan=\"4\" scope=\"col\"><em>Text and font</em></th>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set."
tr (368:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set.</li></ol></td>"
td (382:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 does not support this property."
tr (378:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm94LXNoYWRvdyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 does not support this property.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Opera, the spinners are zoomed in, which can hide the content of the field."
tr (414:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiaGVpZ2h0Iik=}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Opera, the spinners are zoomed in, which can hide the content of the field."
tr (436:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigicGFkZGluZyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li></ol></td>"
tr (448:3) => tableRow
type: "html"
value: "<th colspan=\"4\" scope=\"col\"><em>Text and font</em></th>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "This property is okay on the "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: " element, but it cannot be the case on the "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: " or "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements."
tr (688:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigid2lkdGgiKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>This property is okay on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element, but it cannot be the case on the <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> or <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "The property is applied, but in an inconsistent way between browsers on Mac OSX."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "The property is well applied on the "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: " element, but is inconsistently handled on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: " and "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements."
tr (716:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigicGFkZGluZyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[2]</sup></td>",type: "html"
value: "<td><ol><li>The property is applied, but in an inconsistent way between browsers on Mac OSX.</li><li>The property is well applied on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element, but is inconsistently handled on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td>"
tr (729:3) => tableRow
type: "html"
value: "<th colspan=\"4\" scope=\"col\"><em>Text and font</em></th>"
td (736:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: " and "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements."
tr (732:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiY29sb3IiKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td>"
td (746:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: " and "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements."
tr (742:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiZm9udCIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td>"
td (756:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 does not support this property on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: ", "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: ", and "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements; WebKit based browsers on Mac OSX do not support this property on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: " and "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements."
tr (752:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigibGV0dGVyLXNwYWNpbmciKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 does not support this property on <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code>, <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code>, and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td>"
td (766:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget."
tr (762:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1hbGlnbiIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.</li></ol></td>"
td (776:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: " element."
tr (772:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1kZWNvcmF0aW9uIik=}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td>"
td (786:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Most of the browsers only support this property on the "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: " element."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 does not support this property."
tr (782:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1pbmRlbnQiKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li><li>IE9 does not support this property.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Most of the browsers only support this property on the "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: " element."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 does not support this property."
tr (799:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1zaGFkb3ciKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td>",type: "html"
value: "<td><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li><li>IE9 does not support this property.</li></ol></td>"
td (814:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Most of the browsers only support this property on the "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: " element."
tr (810:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC10cmFuc2Zvcm0iKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td>"
tr (822:3) => tableRow
type: "html"
value: "<th colspan=\"4\" scope=\"col\"><em>Border and background</em></th>"
tr (825:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYmFja2dyb3VuZCIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td rowspan=\"3\"><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td>"
type: "html"
value: "<tr><th scope=\"col\">Property</th><th scope=\"col\" style=\"text-align: center;\">N</th><th scope=\"col\" style=\"text-align: center;\">T</th><th scope=\"col\">Note</th></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>CSS box model</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigid2lkdGgiKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>This property is okay on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element, but it cannot be the case on the <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> or <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiaGVpZ2h0Iik=}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyIik=}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigibWFyZ2luIik=}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigicGFkZGluZyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[2]</sup></td><td><ol><li>The property is applied, but in an inconsistent way between browsers on Mac OSX.</li><li>The property is well applied on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element, but is inconsistently handled on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>Text and font</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiY29sb3IiKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiZm9udCIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigibGV0dGVyLXNwYWNpbmciKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>IE9 does not support this property on <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code>, <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code>, and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1hbGlnbiIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td><td><ol><li>IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1kZWNvcmF0aW9uIik=}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1pbmRlbnQiKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li><li>IE9 does not support this property.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1vdmVyZmxvdyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1zaGFkb3ciKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1][2]</sup></td><td><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li><li>IE9 does not support this property.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC10cmFuc2Zvcm0iKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>Border and background</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYmFja2dyb3VuZCIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td rowspan=\"3\"><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm94LXNoYWRvdyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td></tr>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 does not support this property on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}"
type: "text"
value: ", "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: ", and "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements; WebKit based browsers on Mac OSX do not support this property on "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}"
type: "text"
value: " and "
type: "inlineCode"
value: "{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}"
type: "text"
value: " elements."
tr (918:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigibGV0dGVyLXNwYWNpbmciKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 does not support this property on <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code>, <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code>, and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td>"
td (932:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget."
tr (928:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1hbGlnbiIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set."
tr (987:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set.</li></ol></td>"
td (1001:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "IE9 does not support this property."
tr (997:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm94LXNoYWRvdyIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>IE9 does not support this property.</li></ol></td>"
table (854:1) => table
type: "html"
value: "<tr><th scope=\"col\">Property</th><th scope=\"col\" style=\"text-align: center;\">N</th><th scope=\"col\" style=\"text-align: center;\">T</th><th scope=\"col\">Note</th></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>CSS box model</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigid2lkdGgiKQ==}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiaGVpZ2h0Iik=}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyIik=}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigibWFyZ2luIik=}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigicGFkZGluZyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>Opera does not support {{Y3NzeHJlZigicGFkZGluZy10b3AiKQ==}} and {{Y3NzeHJlZigicGFkZGluZy1ib3R0b20iKQ==}} on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>Text and font</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiY29sb3IiKQ==}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiZm9udCIp}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td>See the note about {{Y3NzeHJlZigibGluZS1oZWlnaHQiKQ==}}.</td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigibGV0dGVyLXNwYWNpbmciKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>IE9 does not support this property on <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code>, <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code>, and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{aHRtbGVsZW1lbnQoIm9wdGlvbiIp}}</code> and <code>{{aHRtbGVsZW1lbnQoIm9wdGdyb3VwIik=}}</code> elements.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1hbGlnbiIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td><td><ol><li>IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1kZWNvcmF0aW9uIik=}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td><td><ol><li>Only supported by Firefox and IE9+.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1pbmRlbnQiKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1vdmVyZmxvdyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1zaGFkb3ciKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC10cmFuc2Zvcm0iKQ==}}</th><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>Most of the browsers only support this property on the <code>{{aHRtbGVsZW1lbnQoInNlbGVjdCIp}}</code> element.</li></ol></td></tr>",type: "html"
value: "<tr><th colspan=\"4\" scope=\"col\"><em>Border and background</em></th></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYmFja2dyb3VuZCIp}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes</td><td></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}}</th><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes<sup>[1]</sup></td><td style=\"text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;\">Yes<sup>[1]</sup></td><td><ol><li>On Opera the {{Y3NzeHJlZigiYm9yZGVyLXJhZGl1cyIp}} property is applied only if an explicit border is set.</li></ol></td></tr>",type: "html"
value: "<tr><th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYm94LXNoYWRvdyIp}}</th><td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No</td><td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td><td><ol><li>IE9 does not support this property.</li></ol></td></tr>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Supported, but there is too much inconsistency between browsers to be reliable."
tr (1200:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiZm9udCIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>Supported, but there is too much inconsistency between browsers to be reliable.</li></ol></td>"
td (1214:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Many browsers apply this property to the select button."
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "It acts more or less like an extra left margin outside the widget."
tr (1232:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigidGV4dC1pbmRlbnQiKQ==}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>It acts more or less like an extra left margin outside the widget.</li></ol></td>"
type: "html"
value: "<th colspan=\"4\" scope=\"col\"><em>Border and background</em></th>"
td (1269:4) => tableCell
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Supported, but there is too much inconsistency between browsers to be reliable."
tr (1265:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"white-space: nowrap; vertical-align: top;\">{{Y3NzeHJlZigiYmFja2dyb3VuZCIp}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;\">No<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>Supported, but there is too much inconsistency between browsers to be reliable.</li></ol></td>"
type: "list"
ordered: true
start: 1
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip."
tr (1729:3) => tableRow
type: "html"
value: "<th scope=\"row\" style=\"vertical-align: top;\">{{Y3NzeHJlZigiaGVpZ2h0Iik=}}</th>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td style=\"text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;\">Partial<sup>[1]</sup></td>",type: "html"
value: "<td><ol><li>Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.</li></ol></td>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, an <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">understanding of HTML</a>, and basic knowledge of <a href=\"/en-US/docs/Web/HTTP/Basics_of_HTTP\">HTTP</a> and <a href=\"/en-US/docs/Learn/Server-side/First_steps\">server-side programming</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, an <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">understanding of HTML</a>, and basic knowledge of <a href=\"/en-US/docs/Web/HTTP/Basics_of_HTTP\">HTTP</a> and <a href=\"/en-US/docs/Learn/Server-side/First_steps\">server-side programming</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what happens when form data is submitted, including getting a basic idea of how data is processed on the server.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, and a basic understanding of <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">HTML</a> and <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic understanding of <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">HTML</a> and <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the issues behind styling forms, and learn some of the basic styling techniques that will be useful to you.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, and a basic understanding of <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">HTML</a> and <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS</a>, including general knowledge of <a href=\"/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">pseudo-classes and pseudo-elements</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic understanding of <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">HTML</a> and <a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS</a>, including general knowledge of <a href=\"/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">pseudo-classes and pseudo-elements</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what parts of forms are hard to style, and why; to learn what can be done to customize them.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, and a basic <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">understanding of HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with what web forms are, what they are used for, how to think about designing them, and the basic HTML elements you'll need for simple cases.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Variable</th><th scope=\"col\">Explanation</th><th scope=\"col\">Example</th></tr>",type: "html"
value: "<tr><th scope=\"row\">{{R2xvc3NhcnkoIlN0cmluZyIp}}</th><td>This is a sequence of text known as a string. To signify that the value is a string, enclose it in single quote marks.</td><td><code>let myVariable = 'Bob';</code></td></tr>",type: "html"
value: "<tr><th scope=\"row\">{{R2xvc3NhcnkoIk51bWJlciIp}}</th><td>This is a number. Numbers don't have quotes around them.</td><td><code>let myVariable = 10;</code></td></tr>",type: "html"
value: "<tr><th scope=\"row\">{{R2xvc3NhcnkoIkJvb2xlYW4iKQ==}}</th><td>This is a True/False value. The words <code>true</code> and <code>false</code> are special keywords that don't need quote marks.</td><td><code>let myVariable = true;</code></td></tr>",type: "html"
value: "<tr><th scope=\"row\">{{R2xvc3NhcnkoIkFycmF5Iik=}}</th><td>This is a structure that allows you to store multiple values in a single reference.</td><td><code>let myVariable = [1,'Bob','Steve',10];</code><br>Refer to each member of the array like this:<br><code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">{{R2xvc3NhcnkoIk9iamVjdCIp}}</th><td>This can be anything. Everything in JavaScript is an object and can be stored in a variable. Keep this in mind as you learn.</td><td><code>let myVariable = document.querySelector('h1');</code><br>All of the above examples too.</td></tr>"
type: "paragraph"
summary: "\nJavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.\n"
locale: "en-US"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: "For \"Not\", the basic expression is "
type: "inlineCode"
value: "true"
type: "text"
value: ", but the comparison returns "
type: "inlineCode"
value: "false"
type: "text"
value: " because we negate it:",type: "paragraph"
summary: "\nJavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.\n"
locale: "en-US"
rowIndex: 5
shouldWrap: true
children:
type: "inlineCode"
value: "let myVariable = 3; !(myVariable === 3);",type: "paragraph"
summary: "\nJavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.\n"
locale: "en-US"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: "\"Does-not-equal\" gives basically the same result with different syntax. Here we are testing \"is "
type: "inlineCode"
value: "myVariable"
type: "text"
value: " NOT equal to 3\". This returns"
type: "inlineCode"
value: " false"
type: "text"
value: " because "
type: "inlineCode"
value: "myVariable"
type: "text"
value: " IS equal to 3:",type: "paragraph"
summary: "\nJavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.\n"
locale: "en-US"
rowIndex: 5
shouldWrap: true
children:
type: "inlineCode"
value: "let myVariable = 3; myVariable !== 3;"
tr (225:3) => tableRow
type: "html"
value: "<th scope=\"row\">Not, Does-not-equal</th>",type: "html"
value: "<td><p>For \"Not\", the basic expression is <code>true</code>, but the comparison returns <code>false</code> because we negate it:</p><p><code>let myVariable = 3;<br>!(myVariable === 3);</code></p><p>\"Does-not-equal\" gives basically the same result with different syntax. Here we are testing \"is <code>myVariable</code> NOT equal to 3\". This returns<code> false</code> because <code>myVariable</code> IS equal to 3:</p><p><code>let myVariable = 3;<br>myVariable !== 3;</code></p></td>"
table.standard-table (187:1) => table
type: "html"
value: "<tr><th scope=\"row\">Operator</th><th scope=\"col\">Explanation</th><th scope=\"col\">Symbol(s)</th><th scope=\"col\">Example</th></tr>",type: "html"
value: "<tr><th scope=\"row\">Addition</th><td>Add two numbers together or combine two strings.</td><td><code>+</code></td><td><code>6 + 9;<br>'Hello ' + 'world!';</code></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Subtraction, Multiplication, Division</th><td>These do what you'd expect them to do in basic math.</td><td><code>-</code>, <code>*</code>, <code>/</code></td><td><code>9 - 3;<br>8 * 2; // multiply in JS is an asterisk<br>9 / 3;</code></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Assignment</th><td>As you've seen already: this assigns a value to a variable.</td><td><code>=</code></td><td><code>let myVariable = 'Bob';</code></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Equality</th><td>This performs a test to see if two values are equal. It returns a <code>true</code>/<code>false</code> (Boolean) result.</td><td><code>===</code></td><td><code>let myVariable = 3;<br>myVariable === 4;</code></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Not, Does-not-equal</th><td>This returns the logically opposite value of what it precedes. It turns a <code>true</code> into a <code>false</code>, etc.. When it is used alongside the Equality operator, the negation operator tests whether two values are <em>not</em> equal.</td><td><code>!</code>, <code>!==</code></td><td><p>For \"Not\", the basic expression is <code>true</code>, but the comparison returns <code>false</code> because we negate it:</p><p><code>let myVariable = 3;<br>!(myVariable === 3);</code></p><p>\"Does-not-equal\" gives basically the same result with different syntax. Here we are testing \"is <code>myVariable</code> NOT equal to 3\". This returns<code> false</code> because <code>myVariable</code> IS equal to 3:</p><p><code>let myVariable = 3;<br>myVariable !== 3;</code></p></td></tr>"
type: "html"
value: "<td id=\"span-example\"><pre class=\"brush: html\">Used to group elements: for example,\nto <span style=\"color:blue\">style\nthem</span>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJzcGFuLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td>"
type: "html"
value: "<td id=\"small-example\"><pre class=\"brush: html\">Used to represent the <small>small\nprint </small>of a document.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJzbWFsbC1leGFtcGxlIiwgMTAwLCA2MCk=}}</td>"
tr (103:2) => tableRow
type: "html"
value: "<td id=\"address-example\"><pre class=\"brush: html\"><address>Main street 67</address></pre>{{RW1iZWRMaXZlU2FtcGxlKCJhZGRyZXNzLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td>"
tr (109:2) => tableRow
type: "html"
value: "<td id=\"cite-example\"><pre class=\"brush: html\">For more monsters,\nsee <cite>The Monster Book of Monsters</cite>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJjaXRlLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td>"
type: "html"
value: "<td id=\"time-example\"><pre class=\"brush: html\">Used to format the date. For example:\n<time datetime=\"2020-05-24\" pubdate>\npublished on 23-05-2020</time>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJ0aW1lLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td>"
tr (153:3) => tableRow
type: "html"
value: "<td id=\"code-example\"><pre class=\"brush: html\">This text is in normal format,\nbut <code>this text is in code\nformat</code>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJjb2RlLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td>"
tr (162:3) => tableRow
type: "html"
value: "<td id=\"audio-example\"><pre class=\"brush: html\"><audio controls=\"controls\">\n <source=\"t-rex-roar.mp3\" type=\"audio/mpeg\">\n Your browser does not support Audio.\n</audio></pre>{{RW1iZWRMaXZlU2FtcGxlKCJhdWRpby1leGFtcGxlIiwgMTAwLCA4MCk=}}</td>"
tr (172:3) => tableRow
type: "html"
value: "<td id=\"video-example\"><pre class=\"brush: html\"><video controls width=\"250\"\n src=\"https://archive.org/download/ElephantsDream/ed_hd.ogv\" >\n The <code>video</code> element is unsupported.\n</video></pre>{{RW1iZWRMaXZlU2FtcGxlKCJ2aWRlby1leGFtcGxlIiwgMTAwLCAyMDAp}}</td>"
table.standard-table (21:1) => table
type: "html"
value: "<tr><td>A link</td><td>{{SFRNTEVsZW1lbnQoImEiKQ==}}</td><td id=\"a-example\"><pre class=\"brush: html\"><a href=\"https://example.org\">\nA link to example.org</a>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJhLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>An image</td><td>{{SFRNTEVsZW1lbnQoImltZyIp}}</td><td id=\"img-example\"><pre class=\"brush: html\"><img src=\"beast.png\" width=\"25\" /></pre>{{RW1iZWRMaXZlU2FtcGxlKCJpbWctZXhhbXBsZSIsIDEwMCwgNjAp}}</td></tr>",type: "html"
value: "<tr><td>An inline container</td><td>{{SFRNTEVsZW1lbnQoInNwYW4iKQ==}}</td><td id=\"span-example\"><pre class=\"brush: html\">Used to group elements: for example,\nto <span style=\"color:blue\">style\nthem</span>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJzcGFuLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Emphasize text</td><td>{{SFRNTEVsZW1lbnQoImVtIik=}}</td><td id=\"em-example\"><pre class=\"brush: html\"><em>I'm posh</em>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJlbS1leGFtcGxlIiwgMTAwLCA2MCk=}}</td></tr>",type: "html"
value: "<tr><td>Italic text</td><td>{{SFRNTEVsZW1lbnQoImkiKQ==}}</td><td id=\"i-example\"><pre class=\"brush: html\">Mark a phrase in <i>italics</i>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJpLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Bold text</td><td>{{SFRNTEVsZW1lbnQoImIiKQ==}}</td><td id=\"b-example\"><pre class=\"brush: html\">Bold <b>a word or phrase</b>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJiLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Important text</td><td>{{SFRNTEVsZW1lbnQoInN0cm9uZyIp}}</td><td id=\"strong-example\"><pre class=\"brush: html\"><strong>I'm important!</strong></pre>{{RW1iZWRMaXZlU2FtcGxlKCJzdHJvbmctZXhhbXBsZSIsIDEwMCwgNjAp}}</td></tr>",type: "html"
value: "<tr><td>Highlight text</td><td>{{SFRNTEVsZW1lbnQoIm1hcmsiKQ==}}</td><td id=\"mark-example\"><pre class=\"brush: html\"><mark>Notice me!</mark></pre>{{RW1iZWRMaXZlU2FtcGxlKCJtYXJrLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Strikethrough text</td><td>{{SFRNTEVsZW1lbnQoInMiKQ==}}</td><td id=\"s-example\"><pre class=\"brush: html\"><s>I'm irrelevant.</s></pre>{{RW1iZWRMaXZlU2FtcGxlKCJzLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Subscript</td><td>{{SFRNTEVsZW1lbnQoInN1YiIp}}</td><td id=\"sub-example\"><pre class=\"brush: html\">H<sub>2</sub>O</pre>{{RW1iZWRMaXZlU2FtcGxlKCJzdWItZXhhbXBsZSIsIDEwMCwgNjAp}}</td></tr>",type: "html"
value: "<tr><td>Small text</td><td>{{SFRNTEVsZW1lbnQoInNtYWxsIik=}}</td><td id=\"small-example\"><pre class=\"brush: html\">Used to represent the <small>small\nprint </small>of a document.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJzbWFsbC1leGFtcGxlIiwgMTAwLCA2MCk=}}</td></tr>",type: "html"
value: "<tr><td>Address</td><td>{{SFRNTEVsZW1lbnQoImFkZHJlc3MiKQ==}}</td><td id=\"address-example\"><pre class=\"brush: html\"><address>Main street 67</address></pre>{{RW1iZWRMaXZlU2FtcGxlKCJhZGRyZXNzLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Textual citation</td><td>{{SFRNTEVsZW1lbnQoImNpdGUiKQ==}}</td><td id=\"cite-example\"><pre class=\"brush: html\">For more monsters,\nsee <cite>The Monster Book of Monsters</cite>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJjaXRlLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Superscript</td><td>{{SFRNTEVsZW1lbnQoInN1cCIp}}</td><td id=\"sup-example\"><pre class=\"brush: html\">x<sup>2</sup></pre>{{RW1iZWRMaXZlU2FtcGxlKCJzdXAtZXhhbXBsZSIsIDEwMCwgNjAp}}</td></tr>",type: "html"
value: "<tr><td>Inline quotation</td><td>{{SFRNTEVsZW1lbnQoInEiKQ==}}</td><td id=\"q-example\"><pre class=\"brush: html\"><q>Me?</q>, she said.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJxLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>A line break</td><td>{{SFRNTEVsZW1lbnQoImJyIik=}}</td><td id=\"br-example\"><pre class=\"brush: html\">Line 1<br>Line 2</pre>{{RW1iZWRMaXZlU2FtcGxlKCJici1leGFtcGxlIiwgMTAwLCA4MCk=}}</td></tr>",type: "html"
value: "<tr><td>A possible line break</td><td>{{SFRNTEVsZW1lbnQoIndiciIp}}</td><td id=\"wbr-example\"><pre class=\"brush: html\"><div style=\"width: 200px\">\n Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.\n</div></pre>{{RW1iZWRMaXZlU2FtcGxlKCJ3YnItZXhhbXBsZSIsIDEwMCwgODAp}}</td></tr>",type: "html"
value: "<tr><td>Date</td><td>{{SFRNTEVsZW1lbnQoInRpbWUiKQ==}}</td><td id=\"time-example\"><pre class=\"brush: html\">Used to format the date. For example:\n<time datetime=\"2020-05-24\" pubdate>\npublished on 23-05-2020</time>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJ0aW1lLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Code format</td><td>{{SFRNTEVsZW1lbnQoImNvZGUiKQ==}}</td><td id=\"code-example\"><pre class=\"brush: html\">This text is in normal format,\nbut <code>this text is in code\nformat</code>.</pre>{{RW1iZWRMaXZlU2FtcGxlKCJjb2RlLWV4YW1wbGUiLCAxMDAsIDYwKQ==}}</td></tr>",type: "html"
value: "<tr><td>Audio</td><td>{{SFRNTEVsZW1lbnQoImF1ZGlvIik=}}</td><td id=\"audio-example\"><pre class=\"brush: html\"><audio controls=\"controls\">\n <source=\"t-rex-roar.mp3\" type=\"audio/mpeg\">\n Your browser does not support Audio.\n</audio></pre>{{RW1iZWRMaXZlU2FtcGxlKCJhdWRpby1leGFtcGxlIiwgMTAwLCA4MCk=}}</td></tr>",type: "html"
value: "<tr><td>Video</td><td>{{SFRNTEVsZW1lbnQoInZpZGVvIik=}}</td><td id=\"video-example\"><pre class=\"brush: html\"><video controls width=\"250\"\n src=\"https://archive.org/download/ElephantsDream/ed_hd.ogv\" >\n The <code>video</code> element is unsupported.\n</video></pre>{{RW1iZWRMaXZlU2FtcGxlKCJ2aWRlby1leGFtcGxlIiwgMTAwLCAyMDAp}}</td></tr>"
tr (198:3) => tableRow
type: "html"
value: "<td id=\"p-example\"><pre class=\"brush: html\"><p>I'm a paragraph</p>\n<p>I'm another paragraph</p></pre>{{RW1iZWRMaXZlU2FtcGxlKCJwLWV4YW1wbGUiLCAxMDAsIDE1MCk=}}</td>"
type: "html"
value: "<td id=\"ul-example\"><pre class=\"brush: html\"><ul><br>\n <li>I'm an item</li><br>\n <li>I'm another item</li><br>\n</ul></pre>{{RW1iZWRMaXZlU2FtcGxlKCJ1bC1leGFtcGxlIiwgMTAwLCAxMDAp}}</td>"
tr (239:3) => tableRow
type: "html"
value: "<td id=\"ol-example\"><pre class=\"brush: html\"><ol><br>\n <li>I'm the first item</li><br>\n <li>I'm the second item</li><br>\n</ol></pre>{{RW1iZWRMaXZlU2FtcGxlKCJvbC1leGFtcGxlIiwgMTAwLCAxMDAp}}</td>"
tr (250:3) => tableRow
type: "html"
value: "<td id=\"dl-example\"><pre class=\"brush: html\"><dl>\n <dt>A Term</dt><br>\n <dd>Definition of a term</dd>\n <dt>Another Term</dt>\n <dd>Definition of another term</dd>\n</dl></pre>{{RW1iZWRMaXZlU2FtcGxlKCJkbC1leGFtcGxlIiwgMTAwLCAxNTAp}}</td>"
type: "html"
value: "<td id=\"h1-h6-example\"><pre class=\"brush: html\"><h1> This is Heading 1 </h1>\n<h2> This is Heading 2 </h2>\n<h3> This is Heading 3 </h3>\n<h4> This is Heading 4 </h4>\n<h5> This is Heading 5 </h5>\n<h6> This is Heading 6 </h6></pre>{{RW1iZWRMaXZlU2FtcGxlKCJoMS1oNi1leGFtcGxlIiwgMTAwLCAzNTAp}}</td>"
table.standard-table (189:1) => table
type: "html"
value: "<tr><td>A simple paragraph</td><td>{{SFRNTEVsZW1lbnQoInAiKQ==}}</td><td id=\"p-example\"><pre class=\"brush: html\"><p>I'm a paragraph</p>\n<p>I'm another paragraph</p></pre>{{RW1iZWRMaXZlU2FtcGxlKCJwLWV4YW1wbGUiLCAxMDAsIDE1MCk=}}</td></tr>",type: "html"
value: "<tr><td>An extended quotation</td><td>{{SFRNTEVsZW1lbnQoImJsb2NrcXVvdGUiKQ==}}</td><td id=\"blockquote-example\"><pre class=\"brush: html\">They said:\n<blockquote>The blockquote element indicates\nan extended quotation.</blockquote></pre>{{RW1iZWRMaXZlU2FtcGxlKCJibG9ja3F1b3RlLWV4YW1wbGUiLCAxMDAsIDEwMCk=}}</td></tr>",type: "html"
value: "<tr><td>Additional information</td><td>{{SFRNTEVsZW1lbnQoImRldGFpbHMiKQ==}}</td><td id=\"details-example\"><pre class=\"brush: html\"><details>\n <summary>Html Cheatsheet</summary>\n <p>Inline elements</p>\n <p>Block elements</p>\n</details></pre>{{RW1iZWRMaXZlU2FtcGxlKCJkZXRhaWxzLWV4YW1wbGUiLCAxMDAsIDE1MCk=}}</td></tr>",type: "html"
value: "<tr><td>An unordered list</td><td>{{SFRNTEVsZW1lbnQoInVsIik=}}</td><td id=\"ul-example\"><pre class=\"brush: html\"><ul><br>\n <li>I'm an item</li><br>\n <li>I'm another item</li><br>\n</ul></pre>{{RW1iZWRMaXZlU2FtcGxlKCJ1bC1leGFtcGxlIiwgMTAwLCAxMDAp}}</td></tr>",type: "html"
value: "<tr><td>An ordered list</td><td>{{SFRNTEVsZW1lbnQoIm9sIik=}}</td><td id=\"ol-example\"><pre class=\"brush: html\"><ol><br>\n <li>I'm the first item</li><br>\n <li>I'm the second item</li><br>\n</ol></pre>{{RW1iZWRMaXZlU2FtcGxlKCJvbC1leGFtcGxlIiwgMTAwLCAxMDAp}}</td></tr>",type: "html"
value: "<tr><td>A definition list</td><td>{{SFRNTEVsZW1lbnQoImRsIik=}}</td><td id=\"dl-example\"><pre class=\"brush: html\"><dl>\n <dt>A Term</dt><br>\n <dd>Definition of a term</dd>\n <dt>Another Term</dt>\n <dd>Definition of another term</dd>\n</dl></pre>{{RW1iZWRMaXZlU2FtcGxlKCJkbC1leGFtcGxlIiwgMTAwLCAxNTAp}}</td></tr>",type: "html"
value: "<tr><td>A horizontal rule</td><td>{{SFRNTEVsZW1lbnQoImhyIik=}}</td><td id=\"hr-example\"><pre class=\"brush: html\">before<hr>after</pre>{{RW1iZWRMaXZlU2FtcGxlKCJoci1leGFtcGxlIiwgMTAwLCAxMDAp}}</td></tr>",type: "html"
value: "<tr><td>Text Heading</td><td>{{SFRNTEVsZW1lbnQoIkhlYWRpbmdfRWxlbWVudHMiLCAiJmx0O2gxJmd0Oy0mbHQ7aDYmZ3Q7Iik=}}</td><td id=\"h1-h6-example\"><pre class=\"brush: html\"><h1> This is Heading 1 </h1>\n<h2> This is Heading 2 </h2>\n<h3> This is Heading 3 </h3>\n<h4> This is Heading 4 </h4>\n<h5> This is Heading 5 </h5>\n<h6> This is Heading 6 </h6></pre>{{RW1iZWRMaXZlU2FtcGxlKCJoMS1oNi1leGFtcGxlIiwgMTAwLCAzNTAp}}</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should already know how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">create a basic HTML document</a> and how to <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#how_do_we_put_an_image_on_a_webpage\">add accessible images to a webpage.</a></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should already know how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">create a basic HTML document</a> and how to <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#how_do_we_put_an_image_on_a_webpage\">add accessible images to a webpage.</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to make different regions of one image link to different pages.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You need to be familiar with how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">create a basic HTML document</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You need to be familiar with how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">create a basic HTML document</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to introduce new keywords and how to build description lists.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You need to be familiar with how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">create a basic HTML document</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You need to be familiar with how to <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">create a basic HTML document</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to trigger JavaScript in your HTML file, and learn the most important best practices for keeping JavaScript accessible.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>. HTML text formatting, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>. HTML text formatting, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to use lesser-known HTML elements to mark up advanced semantic features.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>. HTML text formatting, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>. HTML text formatting, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to implement a hyperlink effectively, and link multiple files together.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>HTML familiarity, as covered in, for example, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>, and <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>HTML familiarity, as covered in, for example, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>, and <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn the basics of using debugging tools to find problems in HTML.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>. HTML text formatting, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>. How hyperlinks work, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>. HTML text formatting, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>. How hyperlinks work, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain basic familiarity with HTML, and practice writing a few HTML elements.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">What's in the head? Metadata in HTML</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a>, and <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">Advanced text formatting</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">What's in the head? Metadata in HTML</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a>, <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a>, and <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">Advanced text formatting</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Test basic and advanced HTML text formatting, use of hyperlinks, and use of HTML <head>.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">Document and website structure</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">Document and website structure</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test knowledge of web page structures, and how to represent a prospective layout design in markup.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic HTML familiarity, as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the HTML head, its purpose, the most important items it can contain, and what effect it can have on the HTML document.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should know the <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">basics of HTML</a> and how to <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">insert an image into your document</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should know the <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">basics of HTML</a> and how to <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">insert an image into your document</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to embed an SVG (vector) image into a webpage.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, familiarity with HTML fundamentals (as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>.)</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, familiarity with HTML fundamentals (as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>.)</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to embed simple images in HTML, annotate them with captions, and how HTML images relate to CSS background images.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through the rest of the <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding\">Multimedia and embedding</a> module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through the rest of the <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding\">Multimedia and embedding</a> module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test knowledge around embedding images and video in web pages, frames, and HTML responsive image techniques.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, familiarity with HTML fundamentals (as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>) and the previous articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, familiarity with HTML fundamentals (as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>) and the previous articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to embed items into web pages using {{aHRtbGVsZW1lbnQoIm9iamVjdCIp}}, {{aHRtbGVsZW1lbnQoImVtYmVkIik=}}, and {{aHRtbGVsZW1lbnQoImlmcmFtZSIp}}, like Flash movies and other webpages.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>You should already know the <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">basics of HTML</a> and how to <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">add static images to a web page</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>You should already know the <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">basics of HTML</a> and how to <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">add static images to a web page</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to use features like {{aHRtbGF0dHJ4cmVmKCJzcmNzZXQiLCAiaW1nIik=}} and the {{aHRtbGVsZW1lbnQoInBpY3R1cmUiKQ==}} element to implement responsive image solutions on websites.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, familiarity with HTML fundamentals (as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>) and <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Images in HTML</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">working with files</a>, familiarity with HTML fundamentals (as covered in <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a>) and <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Images in HTML</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to embed video and audio content into a webpage, and add captions/subtitles to video.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>The basics of HTML (see <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>The basics of HTML (see <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about more advanced HTML table features, and the accessibility of tables.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>The basics of HTML (see <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>The basics of HTML (see <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain basic familiarity with HTML tables.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of HTML tables and associated features.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the use of async/await.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the basic concepts behind asynchronous programming, and how they manifest in web browsers and JavaScript.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with what asynchronous JavaScript is, how it differs from synchronous JavaScript, and what use cases it has.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand promises and how to use them.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand asynchronous loops and intervals and what they are useful for.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Functions\">Functions — reusable blocks of code</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Functions\">Functions — reusable blocks of code</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To provide some practice in building a custom function, and explain a few more useful associated details.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to use conditional structures in JavaScript.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the fundamental concepts behind JavaScript functions.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of JavaScript loops, functions, conditionals, and events.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to use loops in JavaScript.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Functions\">Functions — reusable blocks of code</a>.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Basic computer literacy, a basic understanding of HTML and CSS, <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Functions\">Functions — reusable blocks of code</a>.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand function return values, and how to make use of them.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">building blocks</a>, <a href=\"/en-US/docs/Learn/JavaScript/Objects\">JavaScript objects</a>), the <a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">basics of Client-side APIs</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to use client-side storage APIs to store application data.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">building blocks</a>, <a href=\"/en-US/docs/Learn/JavaScript/Objects\">JavaScript objects</a>), the <a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">basics of Client-side APIs</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn the basics of drawing on <code><canvas></code> elements using JavaScript.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">building blocks</a>, <a href=\"/en-US/docs/Learn/JavaScript/Objects\">JavaScript objects</a>), the <a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">basics of Client-side APIs</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to fetch data from the server and use it to update the contents of a web page.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of <a href=\"/en-US/docs/Learn/HTML\">HTML</a> and <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">building blocks</a>, <a href=\"/en-US/docs/Learn/JavaScript/Objects\">JavaScript objects</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with APIs, what they can do, and how you can use them in your code.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript — including JavaScript objects.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with the core DOM APIs, and the other APIs commonly associated with DOM and document manipulation</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">building blocks</a>, <a href=\"/en-US/docs/Learn/JavaScript/Objects\">JavaScript objects</a>), the <a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">basics of Client-side APIs</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how third-party APIs work, and how to use them to enhance your websites.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">first steps</a>, <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">building blocks</a>, <a href=\"/en-US/docs/Learn/JavaScript/Objects\">JavaScript objects</a>), the <a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">basics of Client-side APIs</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to use browser APIs to control video and audio playback.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To have a first bit of experience at writing some JavaScript, and gain at least a basic understanding of what writing a JavaScript program involves.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what arrays are and how to manipulate them in JavaScript.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with the basics of math in JavaScript.</td></tr>"
td (158:4) => tableCell
type: "paragraph"
summary: "In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short."
locale: "en-US"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: "Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number."
td (161:4) => tableCell
type: "paragraph"
summary: "In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short."
locale: "en-US"
rowIndex: 5
shouldWrap: true
children:
type: "inlineCode"
value: "8 % 3"
type: "text"
value: " (returns 2, as three goes into 8 twice, leaving 2 left over)."
tr (155:3) => tableRow
type: "html"
value: "<td><p>Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.</p></td>",type: "html"
value: "<td><p><code>8 % 3</code> (returns 2, as three goes into 8 twice, leaving 2 left over).</p></td>"
table.standard-table (121:1) => table
type: "html"
value: "<tr><td><code>%</code></td><td>Remainder (sometimes called modulo)</td><td><p>Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.</p></td><td><p><code>8 % 3</code> (returns 2, as three goes into 8 twice, leaving 2 left over).</p></td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of JavaScript fundamentals, such as variables, numbers, operators, strings, and arrays.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with the basics of strings in JavaScript.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand that strings are objects, and learn how to use some of the basic methods available on those objects to manipulate strings.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with the basics of JavaScript variables.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with what JavaScript is, what it can do, and how it fits into a web site.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain the ability and confidence to start fixing problems in your own code.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of JavaScript objects and object-oriented constructs</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the basic theory behind object-oriented programming, how this relates to JavaScript (\"most things are objects\"), and how to start working with JavaScript objects.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how it is possible to implement inheritance in JavaScript.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to work with data stored in JSON, and create your own JSON strings.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the basic theory behind object-oriented programming, how this relates to JavaScript (\"everything is an object\"), and how to create constructors and object instances.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>) and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To get some practice with using objects and object-oriented techniques in a real world context.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Understanding JavaScript functions, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>), and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Understanding JavaScript functions, familiarity with JavaScript basics (see <a href=\"/en-US/docs/Learn/JavaScript/First_steps\">First steps</a> and <a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">Building blocks</a>), and OOJS basics (see <a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">Introduction to objects</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand JavaScript object prototypes, how prototype chains work, and how to add new methods onto the prototype property.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>, and a basic understanding of <a href=\"/en-US/docs/Web/Performance\">web performance optimization</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain confidence in working with clients and management to get them to make web performance a priority.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the impact of HTML elements and attributes on web performance optimization.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the effects of JavaScript on performance optimization, and how a JavaScript file size is not the only impact on web performance.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td>"
td (28:7) => tableCell
type: "paragraph"
summary: "Measuring performance provides an important metric to help you asses the success of your app, site, or web service."
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "To provide information about web performance metrics that you can collect through various web performance APIs and tools that you can use to visualize that data."
tr (26:5) => tableRow
type: "html"
value: "<th scope=\"row\">Objective:</th>",type: "html"
value: "<td><p>To provide information about web performance metrics that you can collect through various web performance APIs and tools that you can use to visualize that data.</p></td>"
table (20:1) => table
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td><p>To provide information about web performance metrics that you can collect through various web performance APIs and tools that you can use to visualize that data.</p></td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain basic familiarity of user perception of web performance.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file size based on each browsers file type support.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain basic familiarity of what is involved with web performance.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy, <a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">basic software installed</a>, and basic knowledge of <a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">client-side web technologies</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain basic familiarity of why web performance is important for good user experience.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>First complete: <a href=\"/en-US/docs/Learn/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the benefits and limitations of the Django admin site, and use it to create some records for our models.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Complete all previous tutorial topics, up to and including <a href=\"/en-US/docs/Learn/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, up to and including <a href=\"/en-US/docs/Learn/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to set up and use user authentication and permissions.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn where and how you can deploy a Django app to production.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic knowledge of using a terminal/command line and how to install software packages on your development computer's operating system.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic knowledge of using a terminal/command line and how to install software packages on your development computer's operating system.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To have a development environment for Django (3.*) running on your computer.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Before attempting this assessment you should have already worked through all the articles in this module.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Before attempting this assessment you should have already worked through all the articles in this module.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To test comprehension of Django fundamentals, including URL configurations, models, views, forms, and templates.</td></tr>"
td (55:4) => tableCell
type: "paragraph"
summary: "In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog."
locale: "en-US"
rowIndex: 2
shouldWrap: true
children:
type: "text"
value: "List of all blog posts:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Accessible to all users from a sidebar link."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "List sorted by post date (newest to oldest)."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "List paginated in groups of 5 articles."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "List items display the blog title, post date, and author."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Blog post names are linked to blog detail pages."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Blogger (author names) are linked to blog author detail pages."
tr (52:3) => tableRow
type: "html"
value: "<td><p>List of all blog posts:</p><ul><li>Accessible to all users from a sidebar link.</li><li>List sorted by post date (newest to oldest).</li><li>List paginated in groups of 5 articles.</li><li>List items display the blog title, post date, and author.</li><li>Blog post names are linked to blog detail pages.</li><li>Blogger (author names) are linked to blog author detail pages.</li></ul></td>"
td (71:4) => tableCell
type: "paragraph"
summary: "In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog."
locale: "en-US"
rowIndex: 3
shouldWrap: true
children:
type: "text"
value: "Information for a specified author (by id) and list of their blog posts:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Accessible to all users from author links in blog posts etc."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Contains some biographical information about the blogger/author."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "List sorted by post date (newest to oldest)."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Not paginated."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "List items display just the blog post name and post date."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Blog post names are linked to blog detail pages."
tr (68:3) => tableRow
type: "html"
value: "<td><p>Information for a specified author (by id) and list of their blog posts:</p><ul><li>Accessible to all users from author links in blog posts etc.</li><li>Contains some biographical information about the blogger/author.</li><li>List sorted by post date (newest to oldest).</li><li>Not paginated.</li><li>List items display just the blog post name and post date.</li><li>Blog post names are linked to blog detail pages.</li></ul></td>"
td (87:4) => tableCell
type: "paragraph"
summary: "In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog."
locale: "en-US"
rowIndex: 4
shouldWrap: true
children:
type: "text"
value: "Blog post details.",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Accessible to all users from blog post lists."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Page contains the blog post: name, author, post date, and content."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Comments for the blog post should be displayed at bottom."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Comments should be sorted in order: oldest to most recent."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Contains link to add comments at end for logged in users (see Comment form page)"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc)."
tr (84:3) => tableRow
type: "html"
value: "<td><p>Blog post details.</p><ul><li>Accessible to all users from blog post lists.</li><li>Page contains the blog post: name, author, post date, and content.</li><li>Comments for the blog post should be displayed at bottom.</li><li>Comments should be sorted in order: oldest to most recent.</li><li>Contains link to add comments at end for logged in users (see Comment form page)</li><li>Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc).</li></ul></td>"
td (103:4) => tableCell
type: "paragraph"
summary: "In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog."
locale: "en-US"
rowIndex: 5
shouldWrap: true
children:
type: "text"
value: "List of bloggers on system:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Accessible to all users from site sidebar"
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Blogger names are linked to Blog author detail pages."
tr (100:3) => tableRow
type: "html"
value: "<td><p>List of bloggers on system:</p><ul><li>Accessible to all users from site sidebar</li><li>Blogger names are linked to Blog author detail pages.</li></ul></td>"
td (115:4) => tableCell
type: "paragraph"
summary: "In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog."
locale: "en-US"
rowIndex: 6
shouldWrap: true
children:
type: "text"
value: "Create comment for blog post:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Accessible to logged-in users (only) from link at bottom of blog post detail pages."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Displays form with description for entering comments (post date and blog is not editable)."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "After a comment has been posted, the page will redirect back to the associated blog post page."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Users cannot edit or delete their posts."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Comment pages should include the name/link to the blogpost being commented on."
tr (112:3) => tableRow
type: "html"
value: "<td><p>Create comment for blog post:</p><ul><li>Accessible to logged-in users (only) from link at bottom of blog post detail pages.</li><li>Displays form with description for entering comments (post date and blog is not editable).</li><li>After a comment has been posted, the page will redirect back to the associated blog post page.</li><li>Users cannot edit or delete their posts.</li><li>Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on.</li><li>Comment pages should include the name/link to the blogpost being commented on.</li></ul></td>"
td (131:4) => tableCell
type: "paragraph"
summary: "In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog."
locale: "en-US"
rowIndex: 7
shouldWrap: true
children:
type: "text"
value: "Standard Django authentication pages for logging in, out and setting the password:",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Login/out should be accessible via sidebar links."
tr (128:3) => tableRow
type: "html"
value: "<td><p>Standard Django authentication pages for logging in, out and setting the password:</p><ul><li>Login/out should be accessible via sidebar links.</li></ul></td>"
td (142:4) => tableCell
type: "paragraph"
summary: "In this assessment you'll use the Django knowledge you've picked up in the Django Web Framework (Python) module to create a very basic blog."
locale: "en-US"
rowIndex: 8
shouldWrap: true
children:
type: "text"
value: "Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):",type: "list"
ordered: false
start:
spread: false
children:
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Admin site blog posts records should display the list of associated comments inline (below each blog post)."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Comment names in the Admin site are created by truncating the comment description to 75 characters."
type: "listItem"
spread: false
children:
type: "paragraph"
children:
type: "text"
value: "Other types of records can use basic registration."
tr (139:3) => tableRow
type: "html"
value: "<td><p>Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):</p><ul><li>Admin site blog posts records should display the list of associated comments inline (below each blog post).</li><li>Comment names in the Admin site are created by truncating the comment description to 75 characters.</li><li>Other types of records can use basic registration.</li></ul></td>"
table.standard-table (38:1) => table
type: "html"
value: "<tr><td>List of all blog posts</td><td><code>/blog/blogs/</code></td><td><p>List of all blog posts:</p><ul><li>Accessible to all users from a sidebar link.</li><li>List sorted by post date (newest to oldest).</li><li>List paginated in groups of 5 articles.</li><li>List items display the blog title, post date, and author.</li><li>Blog post names are linked to blog detail pages.</li><li>Blogger (author names) are linked to blog author detail pages.</li></ul></td></tr>",type: "html"
value: "<tr><td>Blog author (blogger) detail page</td><td><code>/blog/blogger/<em><author-id></em></code></td><td><p>Information for a specified author (by id) and list of their blog posts:</p><ul><li>Accessible to all users from author links in blog posts etc.</li><li>Contains some biographical information about the blogger/author.</li><li>List sorted by post date (newest to oldest).</li><li>Not paginated.</li><li>List items display just the blog post name and post date.</li><li>Blog post names are linked to blog detail pages.</li></ul></td></tr>",type: "html"
value: "<tr><td>Blog post detail page</td><td><code>/blog/<em><blog-id></em></code></td><td><p>Blog post details.</p><ul><li>Accessible to all users from blog post lists.</li><li>Page contains the blog post: name, author, post date, and content.</li><li>Comments for the blog post should be displayed at bottom.</li><li>Comments should be sorted in order: oldest to most recent.</li><li>Contains link to add comments at end for logged in users (see Comment form page)</li><li>Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc).</li></ul></td></tr>",type: "html"
value: "<tr><td>List of all bloggers</td><td><code>/blog/bloggers/</code></td><td><p>List of bloggers on system:</p><ul><li>Accessible to all users from site sidebar</li><li>Blogger names are linked to Blog author detail pages.</li></ul></td></tr>",type: "html"
value: "<tr><td>Comment form page</td><td><code>/blog/<em><blog-id></em>/create</code></td><td><p>Create comment for blog post:</p><ul><li>Accessible to logged-in users (only) from link at bottom of blog post detail pages.</li><li>Displays form with description for entering comments (post date and blog is not editable).</li><li>After a comment has been posted, the page will redirect back to the associated blog post page.</li><li>Users cannot edit or delete their posts.</li><li>Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on.</li><li>Comment pages should include the name/link to the blogpost being commented on.</li></ul></td></tr>",type: "html"
value: "<tr><td>User authentication pages</td><td><code>/accounts/<em><standard urls></em></code></td><td><p>Standard Django authentication pages for logging in, out and setting the password:</p><ul><li>Login/out should be accessible via sidebar links.</li></ul></td></tr>",type: "html"
value: "<tr><td>Admin site</td><td><code>/admin/<em><standard urls></em></code></td><td><p>Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):</p><ul><li>Admin site blog posts records should display the list of associated comments inline (below each blog post).</li><li>Comment names in the Admin site are created by truncating the comment description to 75 characters.</li><li>Other types of records can use basic registration.</li></ul></td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to write forms to get information from users and update the database. To understand how the generic class-based editing views can vastly simplify creating forms for working with a single model.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand where and how to use generic class-based views, and how to extract patterns from URLs and pass the information to views.</td></tr>"
td (311:4) => tableCell
type: "paragraph"
summary: "Congratulations, our basic library functionality is now complete!"
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "This is the RE used in our URL mapper. It matches a string that has "
type: "inlineCode"
value: "book/"
type: "text"
value: " at the start of the line ("
type: "strong"
children:
type: "text"
value: "^book/"
type: "text"
value: "), then has one or more digits ("
type: "inlineCode"
value: "\\d+"
type: "text"
value: "), and then ends (with no non-digit characters before the end of line marker).",type: "paragraph"
summary: "Congratulations, our basic library functionality is now complete!"
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "It also captures all the digits "
type: "strong"
children:
type: "text"
value: "(?P<pk>\\d+)"
type: "text"
value: " and passes them to the view in a parameter named 'pk'. "
type: "strong"
children:
type: "text"
value: "The captured values are always passed as a string!",type: "paragraph"
summary: "Congratulations, our basic library functionality is now complete!"
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "For example, this would match "
type: "inlineCode"
value: "book/1234"
type: "text"
value: " , and send a variable "
type: "inlineCode"
value: "pk='1234'"
type: "text"
value: " to the view."
tr (309:3) => tableRow
type: "html"
value: "<td><p>This is the RE used in our URL mapper. It matches a string that has <code>book/</code> at the start of the line (<strong>^book/</strong>), then has one or more digits (<code>\\d+</code>), and then ends (with no non-digit characters before the end of line marker).</p><p>It also captures all the digits <strong>(?P<pk>\\d+)</strong> and passes them to the view in a parameter named 'pk'. <strong>The captured values are always passed as a string!</strong></p><p>For example, this would match <code>book/1234</code> , and send a variable <code>pk='1234'</code> to the view.</p></td>"
td (325:4) => tableCell
type: "paragraph"
summary: "Congratulations, our basic library functionality is now complete!"
locale: "en-US"
rowIndex: 3
shouldWrap: true
children:
type: "text"
value: "This matches a string that has "
type: "inlineCode"
value: "book/"
type: "text"
value: " at the start of the line ("
type: "strong"
children:
type: "text"
value: "^book/"
type: "text"
value: "), then has one or more characters that are "
type: "emphasis"
children:
type: "text"
value: "either"
type: "text"
value: " a '-' or a word character ("
type: "strong"
children:
type: "text"
value: "[-\\w]+"
type: "text"
value: "), and then ends. It also captures this set of characters and passes them to the view in a parameter named 'stub'.",type: "paragraph"
summary: "Congratulations, our basic library functionality is now complete!"
locale: "en-US"
rowIndex: 3
shouldWrap: true
children:
type: "text"
value: "This is a fairly typical pattern for a \"stub\". Stubs are URL-friendly word-based primary keys for data. You might use a stub if you wanted your book URL to be more informative. For example "
type: "inlineCode"
value: "/catalog/book/the-secret-garden"
type: "text"
value: " rather than "
type: "inlineCode"
value: "/catalog/book/33"
type: "text"
value: "."
tr (323:3) => tableRow
type: "html"
value: "<td><p>This matches a string that has <code>book/</code> at the start of the line (<strong>^book/</strong>), then has one or more characters that are <em>either</em> a '-' or a word character (<strong>[-\\w]+</strong>), and then ends. It also captures this set of characters and passes them to the view in a parameter named 'stub'.</p><p>This is a fairly typical pattern for a \"stub\". Stubs are URL-friendly word-based primary keys for data. You might use a stub if you wanted your book URL to be more informative. For example <code>/catalog/book/the-secret-garden</code> rather than <code>/catalog/book/33</code>.</p></td>"
table.standard-table (301:1) => table
type: "html"
value: "<tr><td><strong>r'^book/(?P<pk>\\d+)$'</strong></td><td><p>This is the RE used in our URL mapper. It matches a string that has <code>book/</code> at the start of the line (<strong>^book/</strong>), then has one or more digits (<code>\\d+</code>), and then ends (with no non-digit characters before the end of line marker).</p><p>It also captures all the digits <strong>(?P<pk>\\d+)</strong> and passes them to the view in a parameter named 'pk'. <strong>The captured values are always passed as a string!</strong></p><p>For example, this would match <code>book/1234</code> , and send a variable <code>pk='1234'</code> to the view.</p></td></tr>",type: "html"
value: "<tr><td><strong>r'^book/(?P<stub>[-\\w]+)$'</strong></td><td><p>This matches a string that has <code>book/</code> at the start of the line (<strong>^book/</strong>), then has one or more characters that are <em>either</em> a '-' or a word character (<strong>[-\\w]+</strong>), and then ends. It also captures this set of characters and passes them to the view in a parameter named 'stub'.</p><p>This is a fairly typical pattern for a \"stub\". Stubs are URL-friendly word-based primary keys for data. You might use a stub if you wanted your book URL to be more informative. For example <code>/catalog/book/the-secret-garden</code> rather than <code>/catalog/book/33</code>.</p></td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Read the <a href=\"/en-US/docs/Learn/Server-side/Django/Introduction\">Django Introduction</a>. Complete previous tutorial topics (including <a href=\"/en-US/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn to create simple url maps and views (where no data is encoded in the URL), get data from models, and create templates.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy. A general understanding of <a href=\"/en-US/docs/Learn/Server-side/First_steps\">server-side website programming</a>, and in particular the mechanics of <a href=\"/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview\">client-server interactions in websites</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy. A general understanding of <a href=\"/en-US/docs/Learn/Server-side/First_steps\">server-side website programming</a>, and in particular the mechanics of <a href=\"/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview\">client-server interactions in websites</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with what Django is, what functionality it provides, and the main building blocks of a Django application.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><a href=\"/en-US/docs/Learn/Server-side/Django/skeleton_website\">Django Tutorial Part 2: Creating a skeleton website</a>.</td>"
td (30:4) => tableCell
type: "paragraph"
summary: "In this article we've learned how models are defined, and then used this information to design and implement appropriate models for the LocalLibrary website."
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "text"
value: "To be able to design and create your own models, choosing fields appropriately."
tr (28:3) => tableRow
type: "html"
value: "<th scope=\"row\">Objective:</th>",type: "html"
value: "<td><p>To be able to design and create your own models, choosing fields appropriately.</p></td>"
table (22:1) => table
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><a href=\"/en-US/docs/Learn/Server-side/Django/skeleton_website\">Django Tutorial Part 2: Creating a skeleton website</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td><p>To be able to design and create your own models, choosing fields appropriately.</p></td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how sessions are used.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><a href=\"/en-US/docs/Learn/Server-side/Django/development_environment\">Set up a Django development environment</a>. Review the <a href=\"/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django Tutorial</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><a href=\"/en-US/docs/Learn/Server-side/Django/development_environment\">Set up a Django development environment</a>. Review the <a href=\"/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django Tutorial</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To be able to use Django's tools to start your own new website projects.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to write unit tests for Django-based websites.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Read the <a href=\"/en-US/docs/Learn/Server-side/Django/Introduction\">Django Introduction</a>. For the following articles you'll also need to have <a href=\"/en-US/docs/Learn/Server-side/Django/development_environment\">set up a Django development environment</a>. </td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Read the <a href=\"/en-US/docs/Learn/Server-side/Django/Introduction\">Django Introduction</a>. For the following articles you'll also need to have <a href=\"/en-US/docs/Learn/Server-side/Django/development_environment\">set up a Django development environment</a>. </td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To introduce the example application used in this tutorial, and allow readers to understand what topics will be covered. </td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Read the Server-side programming \"<a href=\"/en-US/docs/Learn/Server-side/First_steps/Website_security\">Website security</a>\" topic. Complete the Django tutorial topics up to (and including) at least <a href=\"/en-US/docs/Learn/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Read the Server-side programming \"<a href=\"/en-US/docs/Learn/Server-side/First_steps/Website_security\">Website security</a>\" topic. Complete the Django tutorial topics up to (and including) at least <a href=\"/en-US/docs/Learn/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the main things you need to do (or not do) to secure your Django web application.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/forms\">Express Tutorial Part 6: Working with forms</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/forms\">Express Tutorial Part 6: Working with forms</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn where and how you can deploy an Express app to production.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Know how to open a terminal / command line. Know how to install software packages on your development computer's operating system.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Know how to open a terminal / command line. Know how to install software packages on your development computer's operating system.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To set up a development environment for Express on your computer.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete previous tutorial topics (including <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to use the async module and Pug template language, and how to get data from the URL in our controller functions.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Complete all previous tutorial topics, including <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Part 5: Displaying library data</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to write forms to get data from users, and update the database with this data.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy. A general understanding of <a href=\"/en-US/docs/Learn/Server-side/First_steps\">server-side website programming</a>, and in particular the mechanics of <a href=\"/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview\">client-server interactions in websites</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy. A general understanding of <a href=\"/en-US/docs/Learn/Server-side/First_steps\">server-side website programming</a>, and in particular the mechanics of <a href=\"/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview\">client-server interactions in websites</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with what Express is and how it fits in with Node, what functionality it provides, and the main building blocks of an Express application.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Part 2: Creating a skeleton website</a></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To be able to design and create your own models using Mongoose.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Read the <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express/Node introduction</a>. Complete previous tutorial topics (including <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express Tutorial Part 3: Using a Database (with Mongoose)</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how to create simple routes. To set up all our URL endpoints.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment\">Set up a Node development environment</a>. Review the Express Tutorial.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment\">Set up a Node development environment</a>. Review the Express Tutorial.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To be able to start your own new website projects using the <em>Express Application Generator</em>.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Read the <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express Introduction</a>. For the following articles you'll also need to have <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment\">set up a Node development environment</a>. </td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Read the <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express Introduction</a>. For the following articles you'll also need to have <a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment\">set up a Node development environment</a>. </td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To introduce the example application used in this tutorial, and allow readers to understand what topics will be covered. </td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy. A basic understanding of what a web server is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy. A basic understanding of what a web server is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand client-server interactions in a dynamic website, and in particular what operations need to be performed by server-side code.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Basic computer literacy. A basic understanding of what a web server is.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy. A basic understanding of what a web server is.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain familiarity with what server-side programming is, what it can do, and how it differs from client-side programming.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy. Basic understanding of how server-side code handles and responds to HTTP requests (see <a href=\"/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview\">Client-Server overview</a>).</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how web frameworks can simplify development/maintenance of server-side code and to get readers thinking about selecting a framework for their own development.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Basic computer literacy.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the most common threats to web application security and what you can do to reduce the risk of your site being hacked.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to build your Angular app.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To setup a local Angular development environment, create a starter app, and understand the basics of how it works.</td></tr>"
tr (49:1) => tableRow
type: "html"
value: "<td><code><a href=\"https://angular.io/cli/build\">ng build</a></code></td>",type: "html"
value: "<td>Compiles an Angular app into an output directory.</td>"
table.standard-table (48:1) => table
type: "html"
value: "<tr><td><code><a href=\"https://angular.io/cli/build\">ng build</a></code></td><td>Compiles an Angular app into an output directory.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn more about components, including how events work to handle updates. To add check, edit, and delete functionality.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to style an Angular app.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To create our basic app structure, get it displaying a list of to-do items, and understand fundamental Angular concepts such as component structure, sharing data between components, and looping content creation.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To continue our learning about components classes, start looking at conditional rendering, and wire up some of our footer functionality.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to install Ember, and create a starter app.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to create component classes and use events to control interactivity, and keep track of app state using a service.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To provide further resource links and troubleshooting information.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about implementing routing in Ember.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>A deeper understanding of modern JavaScript features (such as classes, modules, etc), will be extremely beneficial, as Ember makes heavy use of them.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to structure an Ember app, and then break that structure into components.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand how client-side JavaScript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about choosing one.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand the main code features of frameworks.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about implementing keyboard accessibility in React.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To show a sensible way of breaking our todo list app into components.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To set up a local React development environment, create a start app, and understand the basics of how it works</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about handling events and state in React, and use those to start making the case study app interactive.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about conditional rendering in React, and implementing list filtering and an editing UI in our app.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To provide further resources for learning more about React.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To introduce our todo list case study, and get the basic <code>App</code> structure and styling in place.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to break our app into components and share information among them.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to prepare our Svelte app for production, and what learning resources you should visit next.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Svelte is a compiler that generates minimal and highly optimized JavaScript code from our sources; you'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Svelte is a compiler that generates minimal and highly optimized JavaScript code from our sources; you'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To setup a local Svelte development environment, create and build a starter app, and understand the basics of how it works.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn some advanced Svelte techniques involving solving reactivity issues, keyboard accessibility problems to do with component lifecycle, and more.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to use Svelte stores</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to create a Svelte component, render it inside another component, pass data into it using props, and save its state.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn how to configure and use TypeScript when developing Svelte applications.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>At minimum, it is recommended that you are familiar with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, and have knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>You'll need a terminal with node + npm installed to compile and build your app.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>Learn and put into practice some basic Svelte concepts, like creating components, passing data using props, render JavaScript expressions into our markup, modify the components state and iterating over lists.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to use Vue computed properties.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to do conditional rendering in Vue.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with <a href=\"https://nodejs.org/en/download/\" rel=\"noopener noreferrer\" target=\"_blank\">Node</a> and <a href=\"https://www.npmjs.com/get-npm\" rel=\"noopener noreferrer\" target=\"_blank\">npm</a> installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with <a href=\"https://nodejs.org/en/download/\" rel=\"noopener noreferrer\" target=\"_blank\">Node</a> and <a href=\"https://www.npmjs.com/get-npm\" rel=\"noopener noreferrer\" target=\"_blank\">npm</a> installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to create a Vue component, render it inside another component, pass data into it using props, and save its state.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To setup a local Vue development environment, create a starter app, and understand the basics of how it works.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about handling forms in Vue, and by association, events, models, and methods.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to handle focus management using Vue refs.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn how to loop through an array of data and render it in multiple components.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn where to go to find further information on Vue, to continue your learning.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td><p>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages, knowledge of the <a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">terminal/command line</a>.</p><p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p></td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To learn about styling Vue components.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To be able to diagnose common Accessibility problems, and use appropriate tools and techniques to fix them.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross-browser testing</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross-browser testing</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To provide an understanding of what automated testing entails, how it can make your life easier, and how to make use of some of the commercial products that make things easier.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high-level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross-browser testing</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high-level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross-browser testing</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what the concept of feature detection is, and be able to implement suitable solutions in CSS and JavaScript.</td></tr>"
td (150:4) => tableCell
type: "paragraph"
summary: "This article covered feature detection in a reasonable amount of detail, going through the main concepts and showing you how to both implement your own feature detection tests and use the Modernizr library to implement tests more easily."
locale: "en-US"
rowIndex: 1
shouldWrap: true
children:
type: "inlineCode"
value: "if(\"geolocation\" in navigator) { ... }"
tr (147:3) => tableRow
type: "html"
value: "<td><p><code>if(\"geolocation\" in navigator) { ... }</code></p></td>"
table.standard-table (137:1) => table
type: "html"
value: "<tr><td><em>If member in object</em></td><td>Check whether a certain method or property (typically an entry point into using the API or other feature you are detecting for) exists in its parent Object.</td><td><p><code>if(\"geolocation\" in navigator) { ... }</code></p></td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To be able to diagnose common HTML and CSS cross browser problems, and use appropriate tools and techniques to fix them.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain an understanding of the high-level concepts involved in cross browser testing.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high-level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high-level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To be able to diagnose common JavaScript cross-browser problems, and use appropriate tools and techniques to fix them.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross-browser testing</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross-browser testing</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To gain an understanding of the high-level concepts involved in cross-browser testing.</td></tr>"
type: "html"
value: "<th scope=\"row\">Prerequisites:</th>",type: "html"
value: "<td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high-level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>, and <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">automated testing</a>.</td>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages; an idea of the high-level <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">principles of cross browser testing</a>, and <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">automated testing</a>.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To show how to set up a Selenium testing environment locally and run tests with it, and how to integrate it with tools like LambdaTest, Sauce Labs, and BrowserStack.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what the terminal/command line is, what basic commands you should learn, and how to install new command line tools.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To finish working through our complete toolchain case study, focusing on deploying the app.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To solidify what we've learnt so far by working through a complete toolchain case study.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what types of client-side tooling there are, and how to find tools and get help with them.</td></tr>"
type: "html"
value: "<tr><th scope=\"row\">Prerequisites:</th><td>Familiarity with the core <a href=\"/en-US/docs/Learn/HTML\">HTML</a>, <a href=\"/en-US/docs/Learn/CSS\">CSS</a>, and <a href=\"/en-US/docs/Learn/JavaScript\">JavaScript</a> languages.</td></tr>",type: "html"
value: "<tr><th scope=\"row\">Objective:</th><td>To understand what package managers and package repositories are, why they are needed, and the basics of how to use them.</td></tr>"
