<p dir="auto">Create a Form Element<br>
<a href="https://www.freecodecamp.com/challenges/create-a-form-element#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%20%20.smaller-image%20%7B%0A%20%20%20%20width%3A%20100px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cp%3EClick%20here%20for%20%3Ca%20href%3D%22%23%22%3Ecat%20photos%3C%2Fa%3E.%3C%2Fp%3E%0A%0A%3Ca%20href%3D%22%23%22%3E%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%3E%3C%2Fa%3E%0A%0A%3Cp%3EThings%20cats%20love%3A%3C%2Fp%3E%0A%3Cul%3E%0A%20%20%3Cli%3Ecat%20nip%3C%2Fli%3E%0A%20%20%3Cli%3Elaser%20pointers%3C%2Fli%3E%0A%20%20%3Cli%3Elasagna%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3Cp%3ETop%203%20things%20cats%20hate%3A%3C%2Fp%3E%0A%3Col%3E%0A%20%20%3Cli%3Eflea%20treatment%3C%2Fli%3E%0A%20%20%3Cli%3Ethunder%3C%2Fli%3E%0A%20%20%3Cli%3Eother%20cats%3C%2Fli%3E%0A%3C%2Fol%3E%0A%3Cform%20fccfaa%3D%22%22%3E%0A%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22cat%20photo%20URL%22%3E%3C%2Fform%3E%0A" rel="nofollow">https://www.freecodecamp.com/challenges/create-a-form-element#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%20%20.smaller-image%20%7B%0A%20%20%20%20width%3A%20100px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cp%3EClick%20here%20for%20%3Ca%20href%3D%22%23%22%3Ecat%20photos%3C%2Fa%3E.%3C%2Fp%3E%0A%0A%3Ca%20href%3D%22%23%22%3E%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%3E%3C%2Fa%3E%0A%0A%3Cp%3EThings%20cats%20love%3A%3C%2Fp%3E%0A%3Cul%3E%0A%20%20%3Cli%3Ecat%20nip%3C%2Fli%3E%0A%20%20%3Cli%3Elaser%20pointers%3C%2Fli%3E%0A%20%20%3Cli%3Elasagna%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3Cp%3ETop%203%20things%20cats%20hate%3A%3C%2Fp%3E%0A%3Col%3E%0A%20%20%3Cli%3Eflea%20treatment%3C%2Fli%3E%0A%20%20%3Cli%3Ethunder%3C%2Fli%3E%0A%20%20%3Cli%3Eother%20cats%3C%2Fli%3E%0A%3C%2Fol%3E%0A%3Cform%20fccfaa%3D%22%22%3E%0A%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22cat%20photo%20URL%22%3E%3C%2Fform%3E%0A</a></p>
<p dir="auto">Chrome blocks the code visualiser<br>
This was a very simple nesting exercise but for some reason I cannot see the results of my coding because apparently the form tag is seen as malicious? I tried resetting my code but nothing seems to work.</p>
<p dir="auto">Google Chrome, macOS Sierra, Macbook Pro</p>
<ul dir="auto">
<li>Browser Name, Version:</li>
<li>Operating System:</li>
<li>Mobile, Desktop, or Tablet:</li>
</ul>
<p dir="auto">My Code</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Lobster&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
&lt;style&gt;
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
&lt;/style&gt;

&lt;h2 class=&quot;red-text&quot;&gt;CatPhotoApp&lt;/h2&gt;

&lt;p&gt;Click here for &lt;a href=&quot;#&quot;&gt;cat photos&lt;/a&gt;.&lt;/p&gt;

&lt;a href=&quot;#&quot;&gt;&lt;img class=&quot;smaller-image thick-green-border&quot; alt=&quot;A cute orange cat lying on its back. &quot; src=&quot;https://bit.ly/fcc-relaxing-cat&quot;&gt;&lt;/a&gt;

&lt;p&gt;Things cats love:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;cat nip&lt;/li&gt;
  &lt;li&gt;laser pointers&lt;/li&gt;
  &lt;li&gt;lasagna&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Top 3 things cats hate:&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;flea treatment&lt;/li&gt;
  &lt;li&gt;thunder&lt;/li&gt;
  &lt;li&gt;other cats&lt;/li&gt;
&lt;/ol&gt;
&lt;form action=&quot;/submit-cat-photo&quot;&gt;&lt;input type=&quot;text&quot; placeholder=&quot;cat photo URL&quot;&gt;&lt;/form&gt;



"><pre class="notranslate"><code class="notranslate">&lt;link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"&gt;
&lt;style&gt;
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
&lt;/style&gt;

&lt;h2 class="red-text"&gt;CatPhotoApp&lt;/h2&gt;

&lt;p&gt;Click here for &lt;a href="#"&gt;cat photos&lt;/a&gt;.&lt;/p&gt;

&lt;a href="#"&gt;&lt;img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"&gt;&lt;/a&gt;

&lt;p&gt;Things cats love:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;cat nip&lt;/li&gt;
  &lt;li&gt;laser pointers&lt;/li&gt;
  &lt;li&gt;lasagna&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Top 3 things cats hate:&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;flea treatment&lt;/li&gt;
  &lt;li&gt;thunder&lt;/li&gt;
  &lt;li&gt;other cats&lt;/li&gt;
&lt;/ol&gt;
&lt;form action="/submit-cat-photo"&gt;&lt;input type="text" placeholder="cat photo URL"&gt;&lt;/form&gt;




</code></pre></div>
<p dir="auto">Screenshot<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/24417739/24832180/0e3dfd0c-1caa-11e7-8b75-6e7c1cb03b5e.png"><img width="1279" alt="screen shot 2017-04-08 at 10 23 30 pm" src="https://cloud.githubusercontent.com/assets/24417739/24832180/0e3dfd0c-1caa-11e7-8b75-6e7c1cb03b5e.png" style="max-width: 100%;"></a></p>
<p dir="auto">Throughout my progressions of the HTML5 &amp; CSS challenges, each time I am asked to add/edit any code within the code editor the cursor within the editor does not show up where intended. I have to begin typing or editing the code via keyboard before the cursor will fix itself and allow me to select the desired location in order to edit or add in the correct spot. While this doesn't prevent users from completing the challenge, it is very stressful constantly having to play "Hide &amp; Seek" with the text cursor when attempting to edit code.</p>