Super Markup Man is a simple HTML/CSS-based programming game with 100 levels and 8 Steam achievements.Two achievements are tied to completion, three for doing specific tasks, two for killing 'bugs', and one for accumulating playtime in a specific game mode.
Nothing is actually missable as you can replay any mode at any time after unlocking them.

A compatible controller is REQUIRED for the "CSS Buddies" achievement. Keep in mind that not all controllers are supported by the game and you might need a Xinput capable device in order to get this one.

It's highly recommended to DISABLE the 'Bugs' mechanic until reaching the Free Play section of the guide (Settings > Bugs). The reason for this is simple, that game mode has a "play for 30 minutes" achievement that requires actual playtime and will NOT unlock by just idling.

Each     ▎represents a platform in the game. Feel free to accommodate the tags and elements in any way you want, just make sure to follow the corresponding sequence to not break any solution.


✧ All three solutions are valid and will give you the same results within the game.

᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

▎<a> text </a>


▎<em> text </em>


▎<strong> text </strong>


▎<em> <a> text </a> </em>


▎<strong> <a> text </a> </strong>


▎<strong> <em> text </em> </strong>


▎<a> text </a>
▎<em> text </em>


▎<strong> text </strong>
▎<a> text </a>


▎<em> text
▎<a> text </a></em>


▎<em> text
▎<strong> text </strong> </em>


▎text <br/>
▎text


▎text <br/>
▎text <br/>
▎text


▎<a> text </a> <br/>
▎text


▎text <br/>
▎<em> text </em>


▎<strong> text <br/>
▎text </strong>


▎text
▎<p> text </p>


▎text
▎<p> text </p>
▎text


▎<em> text </em>
▎<p> text text </p>


▎text <p> <strong> text
▎text text </strong> </p>


▎text <p> text <br/>
▎text </p>


▎<img/>
▎<p> text text </p>


▎<img/> <p> text <br/>
▎text </p>


▎<a> text </a> <br/>
▎<img/>


▎<a> <img/> <br/>
▎text </a>


▎<img/> text
▎<p> <img/> text </p>


▎<h1> text </h1> text


▎<h1> text </h1>
▎<h2> text </h2>


▎<h1> <em> text </em> </h1>
▎<img/>


▎<h2> text </h2>
▎<img/>
▎<p> text </p>


▎<h2> <a> text </a> </h2>
▎<strong> text </strong>


▎text <hr/> text


▎text <hr/>
▎text <br/> text


▎<p> <img/> </p>
▎text <hr/> text


▎<hr/> <img/> <hr/>
▎text <p> text </p>


▎text <hr/>
▎<a> <img/> </a> <br/>
▎text


▎<button> text </button> <br/>
▎<img/>


▎<button> <strong> text </strong> </button>


▎<button> text </button>
▎<button> text <p> text </p> </button>


▎<button> <img/> <br/>
▎<em> text </em> </button>


▎<ul> <li> text </li> </ul>


▎<ul> <li> text </li>
▎<li> text </li> </ul>


▎<ol> <li> text </li> </ol>


▎<ol> <li> text </li>
▎<li> text </li> </ol>


▎<ol> <li> text </li>
▎<li> <a> text </a> </li> </ol>


▎<ul> <li> <strong> text </strong> </li>
▎<li> text </li> </ul>


▎<ol> <li> text </li>
▎<li> text </li>
▎<li> text </li> </ol>


▎<img/>
▎<ul> <li> text </li>
▎<li> text </li> </ul>
▎<p> text </p>
▎text


▎<h2> text </h2>
▎<ol> <em> <li> text </li>
▎<li> text </li> </em> </ol> <hr/>
▎text


▎<h1> text </h1>
▎<ul> <li> <a>
▎<strong> text </strong>
▎</a> </li>
▎<li> text <em> text <br/>
▎text </em> text </li></ul>


▎<ol> <li> text </li>
▎<li> text </li>
▎<ul> <li> text </li>
▎<li> text </li> </ul>
▎<li> <button> text </button> </li> </ol>


᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

✧ Start HTML Mode again.

▎<a> text </a>


▎<em> text </em>


▎<strong> text </strong>


▎<em> <a> text </a> </em>


▎<strong> <a> text </a> </strong>


▎<em> <strong> text </strong> </em>


᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

CSS mode has two sides: left is for HTML coding and right is for CSS styling.
This can be either played in solo (by pressing shift/clicking on the screen to switch sides) or with a partner (if a compatible controller is connected). Either way, you will still need a controller for one achievement, so plug it in now (if you have any), and beat the first CSS level to unlock:

᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

The first CSS level is also perfect to get the Quick Coder achievement.
Just keep restarting it until it's doable within 2 moves:

᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

• HTML
  
  ▎<a> text </a>

• CSS
  
  ▎a{
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<span> text </span>

• CSS
  
  ▎span{
  ▎color: red; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text
  ▎<span> text </span>
  ▎text

• CSS
  
  ▎span{
  ▎color: orange; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text
  ▎<div> text </div>
  ▎text

• CSS
  
  ▎div{
  ▎color: blue; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text <br/>
  ▎text </div>

• CSS
  
  ▎div{
  ▎font-style: italic; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text
  ▎<p> text </p> </div>

• CSS
  
  ▎div{
  ▎font-style: italic;
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<em> text
  ▎<span> text </span>
  ▎text </em>

• CSS
  
  ▎span{
  ▎font-style: normal;
  ▎font-size: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text
  ▎<em> text </em>
  ▎text

• CSS
  
  ▎em{
  ▎color: blue;
  ▎font-size: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text text </div>

• CSS
  
  ▎div{
  ▎background: yellow;
  ▎font-size: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text <br/>
  ▎text </div>

• CSS
  
  ▎div{
  ▎background: red;
  ▎text-align: right; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <img/> <br/>
  ▎text </div>

• CSS
  
  ▎div{
  ▎text-align: center;
  ▎opacity: 0.5; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<h2> text </h2>
  ▎<img/>

• CSS
  
  ▎img{
  ▎opacity: 0.25;
  ▎width: 100%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text
  ▎<img/>
  ▎text

• CSS
  
  ▎img{
  ▎display: block;
  ▎width: 25%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text
  ▎<span> text </span>
  ▎text

• CSS
  
  ▎span{
  ▎display: block;
  ▎opacity: 0.25; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text
  ▎<div> text </div>
  ▎text

• CSS
  
  ▎div{
  ▎background: green;
  ▎display: inline; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<h1> text </h1>
  ▎<img/>

• CSS
  
  ▎h1{
  ▎font-style: italic; }
  ▎img{
  ▎display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<a> text </a>
  ▎<div> <img/> text </div>

• CSS
  
  ▎a{
  ▎font-size: 40px; }
  ▎div{
  ▎display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<h1> text </h1>
  ▎<p> text </p>

• CSS
  
  ▎h1{
  ▎font-size: 20px; }
  ▎p{
  ▎text-align: right; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<button> text </button>
  ▎<p> text </p>

• CSS
  
  ▎button{
  ▎height: 50%; }
  ▎p{
  ▎opacity: 0.25; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<button> text </button>
  ▎<em> text </em>
  ▎<button> text </button>

• CSS
  
  ▎button{
  ▎width: 100%; }
  ▎em{
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<hr/>
  ▎<div> text </div>
  ▎<hr/>

• CSS
  
  ▎div{
  ▎background: orange;
  ▎text-align: center;
  ▎padding: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text <hr/>
  ▎<p> text </p>

• CSS
  
  ▎p{
  ▎background: black;
  ▎color: white;
  ▎padding: 20px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<strong> text </strong>
  ▎<strong> text </strong>

• CSS
  
  ▎strong{
  ▎display: block;
  ▎font-style: italic;
  ▎padding: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text </div>
  ▎<div> text </div>

• CSS
  
  ▎div{
  ▎background: red;
  ▎margin: 40px;
  ▎text-align: right; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎text <hr/>
  ▎<img/> <img/> <br/>
  ▎<img/>

• CSS
  
  ▎img{
  ▎margin: 20px;
  ▎opacity: 0.5;
  ▎width: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<span> text </span>
  ▎<span> text </span>
  ▎<span> text </span>

• CSS
  
  ▎span{
  ▎display: block;
  ▎font-size: 10px;
  ▎margin: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<h2> text </h2>
  ▎<div> </div>
  ▎<div> </div>
  ▎<div> </div>

• CSS
  
  ▎div{
  ▎background: black;
  ▎display: inline;
  ▎margin: 10px;
  ▎padding: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<button> text
  ▎<p> text </p> </button>

• CSS
  
  ▎button{
  ▎color: red;
  ▎font-size: 40px;
  ▎height: 100%;
  ▎width: 50%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<img/>
  ▎<strong> <a> text
  ▎</a> </strong>

• CSS
  
  ▎img{
  ▎opacity: 0.25;
  ▎height: 20px;
  ▎width: 100%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <h2> text </h2>
  ▎<img/> </div>

• CSS
  
  ▎div{
  ▎background: orange;
  ▎height: 25%;
  ▎overflow: scroll; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <img/> </div>
  ▎<button> text </button>

• CSS
  
  ▎div{ background: green;
  ▎height: 40px;
  ▎overflow: hidden; }
  ▎button{
  ▎font-size: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <img/> </div>
  ▎<p> <img/> </p>

• CSS
  
  ▎div{ background: black;
  ▎width: 50%;
  ▎height: 50%; }
  ▎img{
  ▎width: 50%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <button> text
  ▎text </button> </div>

• CSS
  
  ▎div{
  ▎background: blue;
  ▎padding: 10px;
  ▎text-align: right; }
  ▎button{ width: 50%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text <br/>
  ▎text <br/>
  ▎<em> text </em> </div>

• CSS
  
  ▎div{ color: red;
  ▎font-size: 40px;
  ▎text-align: center; }
  ▎em{
  ▎color: blue; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text
  ▎<h1> text </h1>
  ▎text </div>

• CSS
  
  ▎div{ padding: 20px;
  ▎opacity: 0.5;
  ▎text-align: right; }
  ▎h1{
  ▎text-align: left; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<ul> <li> text </li>
  ▎<li> text </li>
  ▎<li> <img/> </li> </ul>

• CSS
  
  ▎ul{ background: yellow;
  ▎margin: 40px; }
  ▎img{
  ▎opacity: 0.5;
  ▎width: 25%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<ol> <li> text </li>
  ▎<li> text </li> </ol>

• CSS
  
  ▎ol{ background: orange;
  ▎padding: 40px; }
  ▎li{
  ▎margin: 20px;
  ▎background: red; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<ol> <li> text </li>
  ▎<ul> <li> text
  ▎</li> </ul> </ol>

• CSS
  
  ▎ol { color: green;
  ▎width: 50%; }
  ▎ul {
  ▎color: red;
  ▎font-style: italic; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <ul> <li> text
  ▎</li> <li> text </li>
  ▎</ul> </div>

• CSS
  
  ▎div{ background: yellow;
  ▎padding: 20px; }
  ▎ul{
  ▎background: orange;
  ▎padding: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<hr/> <ul>
  ▎<li> text </li>
  ▎<li> text </li>
  ▎</ul> <hr/>

• CSS
  
  ▎hr {
  ▎height: 10px;
  ▎width: 50%; }
  ▎li { color: blue;
  ▎display: inline; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <button> text
  ▎</button> <span>
  ▎text </span> </div>

• CSS
  
  ▎div{
  ▎background: green;
  ▎height: 50%; }
  ▎button{ height: 50%; }
  ▎span{ display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<p> text </p>
  ▎<button> text </button>
  ▎<p> text </p>
  ▎<hr/>

• CSS
  
  ▎p{ text-align: right; }
  ▎button{
  ▎background: black;
  ▎color: white; }
  ▎hr{ display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<h2> text text </h2>
  ▎<div> </div>
  ▎<img/>
  ▎<div> </div>

• CSS
  
  ▎h2{ text-align: center; }
  ▎div{
  ▎background: black;
  ▎height: 40px; }
  ▎img{ margin: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<p> <strong> text
  ▎<span> text </span>
  ▎</strong> text
  ▎<span> text </span>
  ▎text </p>

• CSS
  
  ▎p{ color: blue; }
  ▎strong{
  ▎font-style: italic; }
  ▎span{ font-size: 40px;
  ▎opacity: 0.25; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<a> text </a>
  ▎<div> <img/>
  ▎<img/>
  ▎<img/> </div>

• CSS
  
  ▎a{ background: red; }
  ▎div{
  ▎overflow: scroll;
  ▎height: 50px; }
  ▎img{ margin: 20px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <img/> </div>
  ▎<h2> <a> text
  ▎</a> </h2>

• CSS
  
  ▎div{ overflow: hidden;
  ▎height: 40px; }
  ▎img{ width: 100%; }
  ▎h2{ font-size: 20px;
  ▎text-align: center; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<a> text </a>
  ▎<a> text </a> <hr/>
  ▎<em> text </em>
  ▎text
  ▎<em> text </em>

• CSS
  
  ▎a{ display: block;
  ▎padding: 20px; }
  ▎hr{ width: 50%; }
  ▎em{ font-style: normal;
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> text </div>
  ▎<ul> <li> text </li>
  ▎<li> text </li>
  ▎<li> text </li>
  ▎<li> text </li> </ul>

• CSS
  
  ▎div{ background: yellow;
  ▎padding: 20px; }
  ▎ul{ width: 50%; }
  ▎li{ background: yellow;
  ▎display: inline; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<ul> <li> text </li>
  ▎<li> <button> text
  ▎<img/> </button> </li>
  ▎<li> <span> text
  ▎</span> </li> </ul>

• CSS
  
  ▎ul{ color: orange; }
  ▎button{ text-align: left;
  ▎padding: 10px; }
  ▎span{ color: black;
  ▎font-style: italic; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML
  
  ▎<div> <ol> <li> text
  ▎</li> <li> text </li>
  ▎<ul> <li> text </li>
  ▎<li> text </li>
  ▎</ul> </ol> </div>

• CSS
  
  ▎div{ background: black;
  ▎height: 50%; }
  ▎ol{ background: white;
  ▎width: 50%; }
  ▎ul{ background: green; }

᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

We will focus on Free Play mode during this section.
Free play is unlocked after completing both, HTML and CSS modes.
The first thing you'll want to do is head to settings (Esc > Settings), and enable the "Bugs" mechanic. This step is crucial for the next achievements.

Some information regarding "Bugs":

• Bugs are red-colored entities that randomly show up after interacting with blocks on the HTML side.
  
• They don't seem to spawn at all while manipulating the CSS side.
  
• You can't have more than one bug on-screen at the same time.

The best method to farm these is by picking a block of code over and over again, this will make them spawn pretty often. It's even more efficient if you pile up a few blocks and spam spacebar next to them. If bugs stop spawning, start a new free play game and repeat the process.

✧ The achievements you will want to focus on are:

Click on the icon at bottom right corner of the screen to start the download.
This might require a few saved files to trigger.

᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

Destroy 50 bugs cumulatively by jumping over them. This can be done over multiple sessions.

᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁

Simply play this mode for 30 minutes. This achievement only considers played time, so set up a script that spams spacebar next to a block or walk around until it unlocks; idling won't count towards it.

᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁・♡・᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁᠁