Andrea Forte https://www.csteachingtips.org/ en Misconception: Students frequently make errors when creating lists in HTML by using unnecessary or incorrect elements. https://www.csteachingtips.org/tip/misconception-students-frequently-make-errors-when-creating-lists-html-using-unnecessary-or <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Students frequently make errors when creating lists in HTML by using unnecessary or incorrect elements.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T16:19:44-07:00" title="Thursday, July 16, 2015 - 16:19" class="datetime">Thu, 07/16/2015 - 16:19</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-students-frequently-make-errors-when-creating-lists-html-using-unnecessary-or" data-a2a-title="Misconception: Students frequently make errors when creating lists in HTML by using unnecessary or incorrect elements."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Students frequently make errors when creating lists in HTML by using unnecessary or incorrect elements. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Students frequently make errors when creating lists in HTML by using unnecessary or incorrect elements. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>For example, consider the following errors novices frequently make with lists. students may use a paragraph tag instead of a list item tags, or add numbers through text to create an ordered list instead of using the proper tags. <ul><li> <code>&lt;p&gt;1. First item&lt;/p&gt;<br /> &lt;p&gt;2. Second item&lt;/p&gt;</code> <ul><li>In this error, students are using the paragraph tag instead of the list elements tag. Additionally, they hard code the ordering of the lists elements instead of using HTML ordered list tags.</li> <li>Below is the correct code for this error: <ul><code>&lt;ol&gt;<br /> &lt;li&gt;First item&lt;/li&gt;<br /> &lt;li&gt;Second item&lt;/li&gt;<br /> &lt;/ol&gt;</code> </ul></li> </ul></li> <li><code>&lt;ul&gt; <ul>&lt;p&gt;Item one&lt;/p&gt;</ul><p>&lt;/ul&gt;</p></code> <ul><li>In this error, students correctly use the unordered list tags but then use the paragraph tags for list items instead of the list item tags. </li> <li>Below is the correct code for this error: <ul><code>&lt;ul&gt; <ul>&lt;li&gt;Item one&lt;/li&gt;</ul><p>&lt;/ul&gt;</p></code></ul></li> </ul></li> <li><code>&lt;ol&gt; <ul>&lt;li&gt;1. Item one&lt;/li&gt;<br /> &lt;li&gt;2. Item two&lt;/li&gt;</ul><p>&lt;/ol&gt;</p></code> <ul><li>In this error, students fallaciously add the numbering for the list items inside the list items tags. However, since this was correctly tagged as an ordered list, the list items will be numbered by the list item tag and by the hard coded text, resulting in double numbers. </li> <li>Below is the correct code for this error: <ul><code>&lt;ol&gt; <ul>&lt;li&gt;Item one&lt;/li&gt;<br /> &lt;li&gt;Item two&lt;/li&gt;</ul><p>&lt;/ol&gt;</p></code></ul></li> </ul></li> </ul></li> <li>This type of error is called a rules-based error. It occurs when the student is familiar with the basic rules and constructs of a language, but comes up against an unknown exception, edge case, rule, etc. <ul><li>This may be the result of incorrect research or assumptions about what is valid, or it can simply be the result of not knowing all the rules, exceptions and edge cases for programming with HTML and CSS.</li> </ul></li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 23:19:44 +0000 cstt 1121 at https://www.csteachingtips.org Misconception: Students add the numbers for ordered list items inside the HTML list item tags. https://www.csteachingtips.org/tip/misconception-students-add-numbers-ordered-list-items-inside-html-list-item-tags <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Students add the numbers for ordered list items inside the HTML list item tags.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T16:17:24-07:00" title="Thursday, July 16, 2015 - 16:17" class="datetime">Thu, 07/16/2015 - 16:17</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-students-add-numbers-ordered-list-items-inside-html-list-item-tags" data-a2a-title="Misconception: Students add the numbers for ordered list items inside the HTML list item tags."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Students add the numbers for ordered list items inside the HTML list item tags. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Students add the numbers for ordered list items inside the HTML list item tags. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>Since this was correctly tagged as an ordered list, the list items will be numbered by the list item tag and by the hard coded text, resulting in double numbers. </li> <ul><code> <li>&lt;ol&gt; <ul> &lt;li&gt;1. Item one&lt;/li&gt; &lt;li&gt;2. Item two&lt;/li&gt; </ul> &lt;/ol&gt;</li> </code> <ul><li>Below is the correct code for this error:</li> <ul><code> <li>&lt;ol&gt; <ul> &lt;li&gt;Item one&lt;/li&gt; &lt;li&gt;Item two&lt;/li&gt; </ul> &lt;/ol&gt;</li> </code> </ul></ul></ul><li>This type of error is called a rules-based error. It occurs when the student is familiar with the basic rules and constructs of a language, but comes up against an unknown exception, edge case, rule, etc. </li> <ul><li>This may be the result of incorrect research or assumptions about what is valid, or it can simply be the result of not knowing all the rules, exceptions and edge cases for programming with HTML and CSS. </li> </ul></ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 23:17:24 +0000 cstt 1120 at https://www.csteachingtips.org Misconception: novices struggle with correct syntax for inline CSS when learning web development. https://www.csteachingtips.org/tip/misconception-novices-struggle-correct-syntax-inline-css-when-learning-web-development <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: novices struggle with correct syntax for inline CSS when learning web development.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T16:06:56-07:00" title="Thursday, July 16, 2015 - 16:06" class="datetime">Thu, 07/16/2015 - 16:06</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-novices-struggle-correct-syntax-inline-css-when-learning-web-development" data-a2a-title="Misconception: novices struggle with correct syntax for inline CSS when learning web development."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: novices struggle with correct syntax for inline CSS when learning web development. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: novices struggle with correct syntax for inline CSS when learning web development. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>Consider the following error where students struggle to understand how to use CSS syntax in HTML tags in order to get inline CSS styling to work. <ul><li><code>&lt;h1 color:red;&gt;Header&lt;/h1&gt;</code> <ul><li>In this example, the student tries to use CSS syntax as if they were writing directly into the style section of the header as opposed to inside an HTML tag.</li> <li>Below is the correct syntax for inline CSS: <ul><li><code>&lt;h1 style="color:red;"&gt;Header&lt;/h1&gt;</code></li> </ul></li> </ul></li> </ul></li> <li>This type of error is called a rules-based error. It occurs when the student is familiar with the basic rules and constructs of a language, but comes up against an unknown exception, edge case, rule, etc. <ul><li>This may be the result of incorrect research or assumptions about what is valid, or it can simply be the result of not knowing all the rules, exceptions and edge cases for programming with HTML and CSS.</li> </ul></li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 23:06:56 +0000 cstt 1117 at https://www.csteachingtips.org Misconception: Students may have trouble identifying errors in their code that cause elements to disappear from the page. https://www.csteachingtips.org/tip/misconception-students-may-have-trouble-identifying-errors-their-code-cause-elements-disappear <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Students may have trouble identifying errors in their code that cause elements to disappear from the page.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T16:01:19-07:00" title="Thursday, July 16, 2015 - 16:01" class="datetime">Thu, 07/16/2015 - 16:01</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-students-may-have-trouble-identifying-errors-their-code-cause-elements-disappear" data-a2a-title="Misconception: Students may have trouble identifying errors in their code that cause elements to disappear from the page."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Students may have trouble identifying errors in their code that cause elements to disappear from the page. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Students may have trouble identifying errors in their code that cause elements to disappear from the page. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>Common sources of this error include missing content, height, border, or background. When one or many of these elements is missing, it may cause an element to rendered invisible.</li> <ul><li>For example, the HTML element below will be invisible on a page because there is no content in it:</li> <ul><li><code>&lt;div style="width:500px;"&gt;&lt;/div&gt;</code></li> </ul></ul><li>This type of error is called a rules-based error. It occurs when the student is familiar with the basic rules and constructs of a language, but comes up against an unknown exception, edge case, rule, etc. </li> <ul><li>This may be the result of incorrect research or assumptions about what is valid, or it can simply be the result of not knowing all the rules, exceptions and edge cases for programming with HTML and CSS. </li> </ul></ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 23:01:19 +0000 cstt 1116 at https://www.csteachingtips.org Misconception: Students may accidentally use obsolete, invalid, or non-existent elements, attributes, or properties when learning web development. https://www.csteachingtips.org/tip/misconception-students-may-accidentally-use-obsolete-invalid-or-non-existent-elements <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Students may accidentally use obsolete, invalid, or non-existent elements, attributes, or properties when learning web development.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T16:00:18-07:00" title="Thursday, July 16, 2015 - 16:00" class="datetime">Thu, 07/16/2015 - 16:00</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-students-may-accidentally-use-obsolete-invalid-or-non-existent-elements" data-a2a-title="Misconception: Students may accidentally use obsolete, invalid, or non-existent elements, attributes, or properties when learning web development."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Students may accidentally use obsolete, invalid, or non-existent elements, attributes, or properties when learning web development. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Students may accidentally use obsolete, invalid, or non-existent elements, attributes, or properties when learning web development. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>For example, consider the following errors where novices use elements, attributes, and properties that once were valid but are no longer supported. <ul><li><code>&lt;center&gt;&lt;/center&gt;</code> <ul><li>The center tag is an obsolete HTML tag that centered it’s content on a page. With the implementation of HTML5, use of the center tag is incorrect. Students should be using CSS instead.</li> </ul></li> <li><code>&lt;font color="red"&gt;&lt;/font&gt;</code> <ul><li>Like in the example above, the font tag is no longer supported in HTML5. This is an unsupported and obsolete element. Students should be using CSS to style their elements instead.</li> </ul></li> </ul></li> <li>Additionally, consider the following errors where novices use elements, attributes, or properties that do not exist and never have. <ul><li><code>&lt;sidebar&gt;&lt;/sidebar&gt;</code> <ul><li>Sidebar has never been an HTML tag. <ul><li>It is likely that a novice was trying to place elements into a container on the side of a website that may colloquially be referred to as the sidebar.</li> </ul></li> </ul></li> </ul></li> <li>This type of error is called a rules-based error. It occurs when the student is familiar with the basic rules and constructs of a language, but comes up against an unknown exception, edge case, rule, etc. <ul><li>This may be the result of incorrect research or assumptions about what is valid, or it can simply be the result of not knowing all the rules, exceptions and edge cases for programming with HTML and CSS.</li> </ul></li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 23:00:18 +0000 cstt 1114 at https://www.csteachingtips.org Misconception: HTML Beginners confuse tags with attributes and values. https://www.csteachingtips.org/tip/misconception-html-beginners-confuse-tags-attributes-and-values <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: HTML Beginners confuse tags with attributes and values.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T15:51:18-07:00" title="Thursday, July 16, 2015 - 15:51" class="datetime">Thu, 07/16/2015 - 15:51</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-html-beginners-confuse-tags-attributes-and-values" data-a2a-title="Misconception: HTML Beginners confuse tags with attributes and values."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: HTML Beginners confuse tags with attributes and values. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: HTML Beginners confuse tags with attributes and values. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>Consider the following incorrect solution to aligning an element’s text to the right: <ul><li><code>&lt;align="right"&gt;Sidebar&lt;/align&gt;</code> <ul><li>align is an attribute of a tag, but not a tag in itself. This misunderstand results in an inability to complete the task successfully.</li> <li>If align were used as an attribute to a tag like the div tag or the paragraph tag, the text alignment would be changed successfully. <ul><li><code>&lt;p align="right"&gt;Sidebar&lt;/p&gt;</code></li> <li><code>&lt;div align="right"&gt;Sidebar&lt;/div&gt;</code></li> </ul></li> </ul></li> </ul></li> <li>Students may also confuse tags with attributes and values.</li> <li>This type of error is called a knowledge-based error. It occurs as a result of significant gaps in knowledge regarding the basic syntax and semantics of HTML elements, including tags, attributes, and values.</li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 22:51:18 +0000 cstt 1111 at https://www.csteachingtips.org Misconception: Novice students struggle with understanding and correctly using CSS selectors in advanced and complex ways, particularly with selector specificity. https://www.csteachingtips.org/tip/misconception-novice-students-struggle-understanding-and-correctly-using-css-selectors-advanced <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Novice students struggle with understanding and correctly using CSS selectors in advanced and complex ways, particularly with selector specificity. </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T15:41:37-07:00" title="Thursday, July 16, 2015 - 15:41" class="datetime">Thu, 07/16/2015 - 15:41</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-novice-students-struggle-understanding-and-correctly-using-css-selectors-advanced" data-a2a-title="Misconception: Novice students struggle with understanding and correctly using CSS selectors in advanced and complex ways, particularly with selector specificity. "><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Novice students struggle with understanding and correctly using CSS selectors in advanced and complex ways, particularly with selector specificity. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Novice students struggle with understanding and correctly using CSS selectors in advanced and complex ways, particularly with selector specificity. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>Advanced and compound CSS selectors pose difficult to resolve errors for students learning web development. <ul><li>In particular, novices don’t know that certain selectors take precedence over others, let alone that there is CSS selector specificity (essentially a weighting system that determines which CSS rule is applied by the browser). <ul><li>For example, <code>.div</code> has a greater specificity than <code> #element</code></li> </ul></li> </ul></li> <li>This type of error is called a knowledge-based error. It occurs as a result of significant gaps in knowledge. Resolving these types of errors successful involves substantial learning.</li> <li>Note from CSTeachingTips Team: to learn more about CSS Selector Specificity, check out Smashing Magazine’s article <a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">CSS Specificity: Things you Should Know</a>.</li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 22:41:37 +0000 cstt 1107 at https://www.csteachingtips.org Misconception: Students may write code in HTML and CSS that contains many errors yet still renders correctly, leaving them with faulty understandings of concepts and acceptable code. https://www.csteachingtips.org/tip/misconception-students-may-write-code-html-and-css-contains-many-errors-yet-still-renders <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Students may write code in HTML and CSS that contains many errors yet still renders correctly, leaving them with faulty understandings of concepts and acceptable code.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T15:31:22-07:00" title="Thursday, July 16, 2015 - 15:31" class="datetime">Thu, 07/16/2015 - 15:31</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-students-may-write-code-html-and-css-contains-many-errors-yet-still-renders" data-a2a-title="Misconception: Students may write code in HTML and CSS that contains many errors yet still renders correctly, leaving them with faulty understandings of concepts and acceptable code."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Students may write code in HTML and CSS that contains many errors yet still renders correctly, leaving them with faulty understandings of concepts and acceptable code. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Students may write code in HTML and CSS that contains many errors yet still renders correctly, leaving them with faulty understandings of concepts and acceptable code. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>Because the students receive positive feedback in the form of a correctly rendered webpage, these errors remain unresolved and become difficult to overcome as time goes on. <ul><li>It is important evaluate student code beyond rendering correctly in order to identify and begin to correct a student’s faulty understandings.</li> </ul></li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 22:31:22 +0000 cstt 1104 at https://www.csteachingtips.org Misconception: Students frequently misunderstand the requirements for hyperlinks in HTML. https://www.csteachingtips.org/tip/misconception-students-frequently-misunderstand-requirements-hyperlinks-html <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Students frequently misunderstand the requirements for hyperlinks in HTML.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T15:19:37-07:00" title="Thursday, July 16, 2015 - 15:19" class="datetime">Thu, 07/16/2015 - 15:19</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-students-frequently-misunderstand-requirements-hyperlinks-html" data-a2a-title="Misconception: Students frequently misunderstand the requirements for hyperlinks in HTML."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Students frequently misunderstand the requirements for hyperlinks in HTML. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Students frequently misunderstand the requirements for hyperlinks in HTML. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>Consider the following example: <ul><li><code>&lt;a href="Google"&gt;http://google.com&lt;/a&gt;</code> <ul><li>In the example above students misplace the different elements of the hyperlink within the hyperlink syntax. They have the link title where the link should be and vice versa.</li> <li>The correct use and placement of hyperlink concepts is as follows: <ul><li><code>&lt;a href="http://google.com"&gt;Google&lt;/a&gt;</code></li> </ul></li> </ul></li> </ul></li> <li>This type of error is called a rules-based error. It occurs when the student is familiar with the basic rules and constructs of a language, but comes up against an unknown exception, edge case, rule, etc. <ul><li>This may be the result of incorrect research or assumptions about what is valid, or it can simply be the result of not knowing all the rules, exceptions and edge cases for programming with HTML and CSS.</li> </ul></li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 22:19:37 +0000 cstt 1103 at https://www.csteachingtips.org Misconception: Students frequently mix up CSS and HTML syntax when first learning web development. https://www.csteachingtips.org/tip/misconception-students-frequently-mix-css-and-html-syntax-when-first-learning-web-development <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--title--tip.html.twig x field--node--title.html.twig * field--node--tip.html.twig * field--title.html.twig * field--string.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <span class="field field--name-title field--type-string field--label-hidden">Misconception: Students frequently mix up CSS and HTML syntax when first learning web development.</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--title.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--uid--tip.html.twig x field--node--uid.html.twig * field--node--tip.html.twig * field--uid.html.twig * field--entity-reference.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <span class="field field--name-uid field--type-entity-reference field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'username' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> <span>cstt</span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/user/username.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--uid.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--created--tip.html.twig x field--node--created.html.twig * field--node--tip.html.twig * field--created.html.twig * field--created.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <span class="field field--name-created field--type-created field--label-hidden"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'time' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> <time datetime="2015-07-16T15:11:39-07:00" title="Thursday, July 16, 2015 - 15:11" class="datetime">Thu, 07/16/2015 - 15:11</time> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/time.html.twig' --> </span> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--node--created.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'links__node' --> <!-- FILE NAME SUGGESTIONS: * links--node.html.twig x links--inline.html.twig * links--node.html.twig * links.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/navigation/links--inline.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'addtoany_standard' --> <!-- FILE NAME SUGGESTIONS: * addtoany-standard--node--tip.html.twig * addtoany-standard--node.html.twig x addtoany-standard.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <span class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.csteachingtips.org/tip/misconception-students-frequently-mix-css-and-html-syntax-when-first-learning-web-development" data-a2a-title="Misconception: Students frequently mix up CSS and HTML syntax when first learning web development."><a class="a2a_button_facebook"><span class="a2a_label">Share Misconception: Students frequently mix up CSS and HTML syntax when first learning web development. with Facebook</span></a><a class="a2a_button_twitter"><span class="a2a_label">Share Misconception: Students frequently mix up CSS and HTML syntax when first learning web development. with Twitter</span></a></span> <!-- END OUTPUT from 'modules/contrib/addtoany/templates/addtoany-standard.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--body--tip.html.twig * field--node--body.html.twig * field--node--tip.html.twig * field--body.html.twig x field--text-with-summary.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><ul><li>For example, consider the following errors below when students conflate CSS syntax and HTML syntax when it comes to assigning colors and setting up a div respectively. <ul><li><code>div { color=blue; }</code> <ul><li>Incorrectly uses the HTML syntax, the equal sign =, in this CSS style element. The correct syntax would be to use CSS assignment through the colon :.</li> <li>The correct syntax is: <ul><li><code>div {color:blue; }</code></li> </ul></li> </ul></li> <li><code>&lt;div color=red;&gt;</code> <ul><li>Incorrectly tries to apply CSS to a div element using HTML syntax in an HTML div tag. If students wanted to use Inline Style, where you can write CSS code inline with HTML code, they would need to use correct CSS syntax.</li> <li>The correct syntax is: <ul><li><code>&lt;div style="color:red;"&gt;</code></li> </ul></li> </ul></li> </ul></li> <li>Another example is comment syntax. They might make the following mistakes: <ul><li><code>/ CSS comment</code> <ul><li>The correct syntax for a CSS comments is as follows: <ul><li><code>/* Comment Goes Here */</code></li> </ul></li> </ul></li> <li><code>// HTML comment</code> <ul><li>The correct syntax for HTML comments is as follows: <ul><li><code>&lt;!-- Comment Goes Here --&gt;</code></li> </ul></li> </ul></li> </ul></li> </ul></div> <!-- END OUTPUT from 'themes/contrib/bootstrap_barrio/templates/field/field--text-with-summary.html.twig' --> Thu, 16 Jul 2015 22:11:39 +0000 cstt 1102 at https://www.csteachingtips.org