Super Markup Man: 100% Achievement Guide

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.

Example:
▎<a> text <a> ▎ ▎ ▎ ▎
VS
▎ ▎<a> ▎text <a> ▎ ▎
VS
▎<a> ▎ ▎ ▎text ▎<a>

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

HTML Mode

Lᴇᴠᴇʟ 1
¨¨¨¨¨¨¨¨¨¨

▎<a> text </a>

Lᴇᴠᴇʟ 2
¨¨¨¨¨¨¨¨¨¨

▎<em> text </em>

Lᴇᴠᴇʟ 3
¨¨¨¨¨¨¨¨¨¨

▎<strong> text </strong>

Lᴇᴠᴇʟ 4
¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 5
¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 6
¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 7
¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 8
¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 9
¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 10
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 11
¨¨¨¨¨¨¨¨¨¨¨¨

▎text <br/>
▎text

Lᴇᴠᴇʟ 12
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 13
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 14
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 15
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 16
¨¨¨¨¨¨¨¨¨¨¨¨

▎text
▎<p> text </p>

Lᴇᴠᴇʟ 17
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 18
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 19
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 20
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 21
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 22
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 23
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 24
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 25
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 26
¨¨¨¨¨¨¨¨¨¨¨¨

▎<h1> text </h1> text

Lᴇᴠᴇʟ 27
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 28
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 29
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 30
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 31
¨¨¨¨¨¨¨¨¨¨¨¨

▎text <hr/> text

Lᴇᴠᴇʟ 32
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 33
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 34
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 35
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 36
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 37
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 38
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 39
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 40
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 41
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 42
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 43
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 44
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 45
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 46
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 47
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 48
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 49
¨¨¨¨¨¨¨¨¨¨¨¨

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

Lᴇᴠᴇʟ 50
¨¨¨¨¨¨¨¨¨¨¨¨

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

HTML Master

Complete HTML Mode.

✧ Start HTML Mode again.

Level 1
¨¨¨¨¨¨¨¨¨¨¨¨

▎<a> text </a>

Level 2
¨¨¨¨¨¨¨¨¨¨¨¨

▎<em> text </em>

Level 3
¨¨¨¨¨¨¨¨¨¨¨¨

▎<strong> text </strong>

Level 4
¨¨¨¨¨¨¨¨¨¨¨¨

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

Level 5
¨¨¨¨¨¨¨¨¨¨¨¨

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

Level 6
¨¨¨¨¨¨¨¨¨¨¨¨

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

Tag Redo

Solve HTML Level 6 two different ways.

CSS Mode – Part I

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:

CSS Buddies

Complete a level in co-op.

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

Quick Coder

Solve a CSS level in two moves.

Note: Keep in mind that the starting block positions are randomized each run, so this achievement can take a few or many restarts depending on your luck.
Lᴇᴠᴇʟ 1
¨¨¨¨¨¨¨¨¨¨
  • HTML▎<a> text </a>
  • CSS▎a{
    ▎color: green; }

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

Lᴇᴠᴇʟ 2
¨¨¨¨¨¨¨¨¨¨
  • HTML▎<span> text </span>
  • CSS▎span{
    ▎color: red; }

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

Lᴇᴠᴇʟ 3
¨¨¨¨¨¨¨¨¨¨
  • HTML▎text
    ▎<span> text </span>
    ▎text
  • CSS▎span{
    ▎color: orange; }

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

Lᴇᴠᴇʟ 4
¨¨¨¨¨¨¨¨¨¨
  • HTML▎text
    ▎<div> text </div>
    ▎text
  • CSS▎div{
    ▎color: blue; }

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

Lᴇᴠᴇʟ 5
¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> text <br/>
    ▎text </div>
  • CSS▎div{
    ▎font-style: italic; }

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

Lᴇᴠᴇʟ 6
¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> text
    ▎<p> text </p> </div>
  • CSS▎div{
    ▎font-style: italic;
    ▎color: green; }

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

Lᴇᴠᴇʟ 7
¨¨¨¨¨¨¨¨¨¨
  • HTML▎<em> text
    ▎<span> text </span>
    ▎text </em>
  • CSS▎span{
    ▎font-style: normal;
    ▎font-size: 40px; }

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

Lᴇᴠᴇʟ 8
¨¨¨¨¨¨¨¨¨¨
  • HTML▎text
    ▎<em> text </em>
    ▎text
  • CSS▎em{
    ▎color: blue;
    ▎font-size: 10px; }

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

Lᴇᴠᴇʟ 9
¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> text text </div>
  • CSS▎div{
    ▎background: yellow;
    ▎font-size: 40px; }

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

Lᴇᴠᴇʟ 10
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> text <br/>
    ▎text </div>
  • CSS▎div{
    ▎background: red;
    ▎text-align: right; }

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

Lᴇᴠᴇʟ 11
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> <img/> <br/>
    ▎text </div>
  • CSS▎div{
    ▎text-align: center;
    ▎opacity: 0.5; }

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

Lᴇᴠᴇʟ 12
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<h2> text </h2>
    ▎<img/>
  • CSS▎img{
    ▎opacity: 0.25;
    ▎width: 100%; }

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

Lᴇᴠᴇʟ 13
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎text
    ▎<img/>
    ▎text
  • CSS▎img{
    ▎display: block;
    ▎width: 25%; }

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

Lᴇᴠᴇʟ 14
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎text
    ▎<span> text </span>
    ▎text
  • CSS▎span{
    ▎display: block;
    ▎opacity: 0.25; }

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

Lᴇᴠᴇʟ 15
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎text
    ▎<div> text </div>
    ▎text
  • CSS▎div{
    ▎background: green;
    ▎display: inline; }

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

Lᴇᴠᴇʟ 16
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<h1> text </h1>
    ▎<img/>
  • CSS▎h1{
    ▎font-style: italic; }
    ▎img{
    ▎display: none; }

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

Lᴇᴠᴇʟ 17
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<a> text </a>
    ▎<div> <img/> text </div>
  • CSS▎a{
    ▎font-size: 40px; }
    ▎div{
    ▎display: none; }

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

Lᴇᴠᴇʟ 18
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<h1> text </h1>
    ▎<p> text </p>
  • CSS▎h1{
    ▎font-size: 20px; }
    ▎p{
    ▎text-align: right; }

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

Lᴇᴠᴇʟ 19
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<button> text </button>
    ▎<p> text </p>
  • CSS▎button{
    ▎height: 50%; }
    ▎p{
    ▎opacity: 0.25; }

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

Lᴇᴠᴇʟ 20
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<button> text </button>
    ▎<em> text </em>
    ▎<button> text </button>
  • CSS▎button{
    ▎width: 100%; }
    ▎em{
    ▎color: green; }

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

Lᴇᴠᴇʟ 21
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<hr/>
    ▎<div> text </div>
    ▎<hr/>
  • CSS▎div{
    ▎background: orange;
    ▎text-align: center;
    ▎padding: 10px; }

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

Lᴇᴠᴇʟ 22
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎text <hr/>
    ▎<p> text </p>
  • CSS▎p{
    ▎background: black;
    ▎color: white;
    ▎padding: 20px; }

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

Lᴇᴠᴇʟ 23
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<strong> text </strong>
    ▎<strong> text </strong>
  • CSS▎strong{
    ▎display: block;
    ▎font-style: italic;
    ▎padding: 40px; }

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

Lᴇᴠᴇʟ 24
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> text </div>
    ▎<div> text </div>
  • CSS▎div{
    ▎background: red;
    ▎margin: 40px;
    ▎text-align: right; }

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

Lᴇᴠᴇʟ 25
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎text <hr/>
    ▎<img/> <img/> <br/>
    ▎<img/>
  • CSS▎img{
    ▎margin: 20px;
    ▎opacity: 0.5;
    ▎width: 40px; }

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

CSS Mode – Part II

Lᴇᴠᴇʟ 26
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<span> text </span>
    ▎<span> text </span>
    ▎<span> text </span>
  • CSS▎span{
    ▎display: block;
    ▎font-size: 10px;
    ▎margin: 40px; }

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

Lᴇᴠᴇʟ 27
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<h2> text </h2>
    ▎<div> </div>
    ▎<div> </div>
    ▎<div> </div>
  • CSS▎div{
    ▎background: black;
    ▎display: inline;
    ▎margin: 10px;
    ▎padding: 10px; }

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

Lᴇᴠᴇʟ 28
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<button> text
    ▎<p> text </p> </button>
  • CSS▎button{
    ▎color: red;
    ▎font-size: 40px;
    ▎height: 100%;
    ▎width: 50%; }

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

Lᴇᴠᴇʟ 29
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<img/>
    ▎<strong> <a> text
    ▎</a> </strong>
  • CSS▎img{
    ▎opacity: 0.25;
    ▎height: 20px;
    ▎width: 100%; }

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

Lᴇᴠᴇʟ 30
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> <h2> text </h2>
    ▎<img/> </div>
  • CSS▎div{
    ▎background: orange;
    ▎height: 25%;
    ▎overflow: scroll; }

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

Lᴇᴠᴇʟ 31
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> <img/> </div>
    ▎<button> text </button>
  • CSS▎div{ background: green;
    ▎height: 40px;
    ▎overflow: hidden; }
    ▎button{
    ▎font-size: 10px; }

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

Lᴇᴠᴇʟ 32
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> <img/> </div>
    ▎<p> <img/> </p>
  • CSS▎div{ background: black;
    ▎width: 50%;
    ▎height: 50%; }
    ▎img{
    ▎width: 50%; }

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

Lᴇᴠᴇʟ 33
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> <button> text
    ▎text </button> </div>
  • CSS▎div{
    ▎background: blue;
    ▎padding: 10px;
    ▎text-align: right; }
    ▎button{ width: 50%; }

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

Lᴇᴠᴇʟ 34
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> text <br/>
    ▎text <br/>
    ▎<em> text </em> </div>
  • CSS▎div{ color: red;
    ▎font-size: 40px;
    ▎text-align: center; }
    ▎em{
    ▎color: blue; }

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

Lᴇᴠᴇʟ 35
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> text
    ▎<h1> text </h1>
    ▎text </div>
  • CSS▎div{ padding: 20px;
    ▎opacity: 0.5;
    ▎text-align: right; }
    ▎h1{
    ▎text-align: left; }

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

Lᴇᴠᴇʟ 36
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<ul> <li> text </li>
    ▎<li> text </li>
    ▎<li> <img/> </li> </ul>
  • CSS▎ul{ background: yellow;
    ▎margin: 40px; }
    ▎img{
    ▎opacity: 0.5;
    ▎width: 25%; }

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

Lᴇᴠᴇʟ 37
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<ol> <li> text </li>
    ▎<li> text </li> </ol>
  • CSS▎ol{ background: orange;
    ▎padding: 40px; }
    ▎li{
    ▎margin: 20px;
    ▎background: red; }

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

Lᴇᴠᴇʟ 38
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<ol> <li> text </li>
    ▎<ul> <li> text
    ▎</li> </ul> </ol>
  • CSS▎ol { color: green;
    ▎width: 50%; }
    ▎ul {
    ▎color: red;
    ▎font-style: italic; }

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

Lᴇᴠᴇʟ 39
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> <ul> <li> text
    ▎</li> <li> text </li>
    ▎</ul> </div>
  • CSS▎div{ background: yellow;
    ▎padding: 20px; }
    ▎ul{
    ▎background: orange;
    ▎padding: 40px; }

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

Lᴇᴠᴇʟ 40
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<hr/> <ul>
    ▎<li> text </li>
    ▎<li> text </li>
    ▎</ul> <hr/>
  • CSS▎hr {
    ▎height: 10px;
    ▎width: 50%; }
    ▎li { color: blue;
    ▎display: inline; }

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

Lᴇᴠᴇʟ 41
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<div> <button> text
    ▎</button> <span>
    ▎text </span> </div>
  • CSS▎div{
    ▎background: green;
    ▎height: 50%; }
    ▎button{ height: 50%; }
    ▎span{ display: none; }

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

Lᴇᴠᴇʟ 42
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<p> text </p>
    ▎<button> text </button>
    ▎<p> text </p>
    ▎<hr/>
  • CSS▎p{ text-align: right; }
    ▎button{
    ▎background: black;
    ▎color: white; }
    ▎hr{ display: none; }

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

Lᴇᴠᴇʟ 43
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<h2> text text </h2>
    ▎<div> </div>
    ▎<img/>
    ▎<div> </div>
  • CSS▎h2{ text-align: center; }
    ▎div{
    ▎background: black;
    ▎height: 40px; }
    ▎img{ margin: 10px; }

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

Lᴇᴠᴇʟ 44
¨¨¨¨¨¨¨¨¨¨¨¨
  • 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; }

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

Lᴇᴠᴇʟ 45
¨¨¨¨¨¨¨¨¨¨¨¨
  • HTML▎<a> text </a>
    ▎<div> <img/>
    ▎<img/>
    ▎<img/> </div>
  • CSS▎a{ background: red; }
    ▎div{
    ▎overflow: scroll;
    ▎height: 50px; }
    ▎img{ margin: 20px; }

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

Lᴇᴠᴇʟ 46
¨¨¨¨¨¨¨¨¨¨¨¨
  • 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; }

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

Lᴇᴠᴇʟ 47
¨¨¨¨¨¨¨¨¨¨¨¨
  • 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; }

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

Lᴇᴠᴇʟ 48
¨¨¨¨¨¨¨¨¨¨¨¨
  • 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; }

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

Lᴇᴠᴇʟ 49
¨¨¨¨¨¨¨¨¨¨¨¨
  • 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; }

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

Lᴇᴠᴇʟ 50
¨¨¨¨¨¨¨¨¨¨¨¨
  • 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; }
CSS Master

Complete CSS Mode.

Free Play and Remaining Achievements

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.

Code Reviewer

In Free Play, download a file that has a bug in it.

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

Bug Free

Turn on the “bugs” setting and squash 50 bugs while you play.

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.

Practice Time

Play Free Play for 30 minutes.

Written by lylat