Super Markup Man: 100% Achievement Guide

Published on: October 7, 2019 by Robins Chew 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: ▎ text ▎ ▎ ▎ ▎ VS ▎ ▎ ▎text ▎ ▎ VS ▎ ▎ ▎ ▎text ▎

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

HTML Mode

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

▎ text

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

▎ text

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

▎ text

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

▎ text

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

▎ text

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

▎ text

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

▎ text
▎ text

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

▎ text
▎ text

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

▎ text
▎ text

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

▎ text
▎ text

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

▎text

▎text

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

▎text

▎text

▎text

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

▎ text

▎text

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

▎text

▎ text

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

▎ text

▎text

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

▎text
▎

text

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

▎text
▎

text

▎text

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

▎ text
▎

text text

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

▎text

text
▎text text

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

▎text

text

▎text

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

▎
▎

text text

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

▎

text

▎text

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

▎ text

▎

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

▎

▎text

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

▎ text
▎

text

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

▎

text

text

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

▎

text

▎

text

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

▎

text

▎

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

▎

text

▎
▎

text

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

▎

text

▎ text

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

▎text

---

text

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

▎text

---

▎text
text

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

▎

▎text

---

text

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

▎

---

---

▎text

text

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

▎text

---

▎

▎text

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

▎ text

▎

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

▎ text

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

▎ text
▎ text

text

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

▎

▎ text

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

▎

• text

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

▎

• text

▎
• text

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

▎

1. text

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

▎

1. text

▎
2. text

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

▎

1. text

▎
2. text

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

▎

• text

▎
• text

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

▎

1. text

▎
2. text

▎
3. text

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

▎
▎

• text

▎
• text

▎

text

▎text

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

▎

text

▎

1. text

▎
2. text

---

▎text

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

▎

text

▎

• 
  ▎ text
  ▎

▎
• text text
  
  ▎text text

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

▎

1. text

▎
2. text

▎
• text

▎
• text

▎
3. text

HTML Master

Complete HTML Mode.

✧ Start HTML Mode again.

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

▎ text

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

▎ text

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

▎ text

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

▎ text

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

▎ text

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

▎ text

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▎ text

• CSS▎a{
  ▎color: green; }

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

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

• HTML▎ text

• CSS▎span{
  ▎color: red; }

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

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

• HTML▎text
  ▎ text
  ▎text

• CSS▎span{
  ▎color: orange; }

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

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

• HTML▎text
  ▎
  text
  
  ▎text

• CSS▎div{
  ▎color: blue; }

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

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

• HTML▎
  text
  
  ▎text

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

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

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

• HTML▎
  text
  ▎

  text

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

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

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

• HTML▎ text
  ▎ text
  ▎text

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

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

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

• HTML▎text
  ▎ text
  ▎text

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

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

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

• HTML▎
  text text

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

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

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

• HTML▎
  text
  
  ▎text

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

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

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

• HTML▎
  
  
  ▎text

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

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

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

• HTML▎

  text

  
  ▎

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

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

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

• HTML▎text
  ▎
  ▎text

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

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

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

• HTML▎text
  ▎ text
  ▎text

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

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

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

• HTML▎text
  ▎
  text
  
  ▎text

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

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

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

• HTML▎

  text

  
  ▎

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

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

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

• HTML▎ text
  ▎
  text

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

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

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

• HTML▎

  text

  
  ▎

  text

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

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

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

• HTML▎ text
  ▎

  text

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

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

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

• HTML▎ text
  ▎ text
  ▎ text

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

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

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

• HTML▎

  ---

  
  ▎
  text
  
  ▎

  ---

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

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

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

• HTML▎text

  ---

  
  ▎

  text

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

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

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

• HTML▎ text
  ▎ text

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

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

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

• HTML▎
  text
  
  ▎
  text

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

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

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

• HTML▎text

  ---

  
  ▎
  
  ▎

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

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

CSS Mode – Part II

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

• HTML▎ text
  ▎ text
  ▎ text

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

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

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

• HTML▎

  text

  
  ▎
  
  ▎
  
  ▎

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

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

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

• HTML▎ text
  ▎

  text

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

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

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

• HTML▎
  ▎ text
  ▎

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

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

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

• HTML▎

  text

  
  ▎

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

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

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

• HTML▎
  
  ▎ text

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

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

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

• HTML▎
  
  ▎

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

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

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

• HTML▎
  text
  ▎text

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

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

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

• HTML▎
  text
  
  ▎text
  
  ▎ text

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

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

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

• HTML▎
  text
  ▎

  text

  
  ▎text

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

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

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

• HTML▎
  • text
  
  ▎
  • text
  
  ▎

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

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

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

• HTML▎
  1. text
  
  ▎
  2. text

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

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

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

• HTML▎
  1. text
  
  ▎
  • text
    ▎

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

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

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

• HTML▎
  • text
    ▎
  • text
  
  ▎

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

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

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

• HTML▎

  ---

  
  ▎
  • text
  
  ▎
  • text
  
  ▎

  ---

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

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

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

• HTML▎
  text
  ▎
  ▎text

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

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

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

• HTML▎

  text

  
  ▎ text
  ▎

  text

  
  ▎

  ---

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

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

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

• HTML▎

  text text

  
  ▎
  
  ▎
  ▎

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

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

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

• HTML▎

  text
  ▎ text
  ▎ text
  ▎ text
  ▎text

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

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

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

• HTML▎ text
  ▎
  
  ▎
  ▎

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

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

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

• HTML▎
  
  ▎

  text
  ▎

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

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

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

• HTML▎ text
  ▎ text

  ---

  
  ▎ text
  ▎text
  ▎ text

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

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

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

• HTML▎
  text
  
  ▎
  • text
  
  ▎
  • text
  
  ▎
  • text
  
  ▎
  • text

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

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

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

• HTML▎
  • text
  
  ▎
  • text
    ▎
  
  ▎
  • text
    ▎

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

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

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

• HTML▎
  1. text
     ▎
  2. text
  
  ▎
  • text
  
  ▎
  • text
  
  ▎

• 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

About Robins Chew

I'm Robins, who love to play the mobile games from Google Play, I will share the gift codes in this website, if you also love mobile games, come play with me. Besides, I will also play some video games relresed from Steam.

Contact me Via X