From 97d74144847aa794a3e533d62d0e986480ac058a Mon Sep 17 00:00:00 2001
From: lee <leedasilva988@gmail.com>
Date: Tue, 14 Feb 2023 13:00:40 +0000
Subject: [PATCH] refactor(public): format DOM exercises for better user
 experience

---
 subjects/build-brick-and-break/README.md      |   3 +-
 .../build-brick-and-break.css                 |  61 +++++
 .../build-brick-and-break.html                | 113 ++-------
 subjects/fifty-shades-of-cold/README.md       |   3 +-
 .../fifty-shades-of-cold.css                  |  35 +++
 .../fifty-shades-of-cold.html                 |  59 +----
 subjects/get-them-all-dom/README.md           |   2 +
 subjects/get-them-all-dom/get-them-all.css    |  87 +++++++
 subjects/get-them-all-dom/get-them-all.html   | 236 ++++++------------
 subjects/gossip-grid/README.md                |   3 +-
 subjects/gossip-grid/gossip-grid.css          | 115 +++++++++
 subjects/gossip-grid/gossip-grid.html         | 128 +---------
 .../harder-bigger-bolder-stronger/README.md   |   3 +-
 .../harder-bigger-bolder-stronger.css         |  37 +++
 .../harder-bigger-bolder-stronger.html        |  50 +---
 subjects/keycodes-symphony/README.md          |   3 +-
 .../keycodes-symphony/keycodes-symphony.css   |  37 +++
 .../keycodes-symphony/keycodes-symphony.html  |  49 +---
 subjects/mouse-trap/README.md                 |   3 +-
 subjects/mouse-trap/mouse-trap.css            |  42 ++++
 subjects/mouse-trap/mouse-trap.html           |  58 +----
 subjects/pick-and-click/README.md             |   4 +-
 subjects/pick-and-click/pick-and-click.css    |  66 +++++
 subjects/pick-and-click/pick-and-click.html   |  77 +-----
 subjects/pimp-my-style/README.md              |   3 +-
 subjects/pimp-my-style/pimp-my-style.css      | 154 ++++++++++++
 subjects/pimp-my-style/pimp-my-style.html     | 179 +------------
 subjects/where-do-we-go/README.md             |   5 +-
 subjects/where-do-we-go/where-do-we-go.css    |  56 +++++
 subjects/where-do-we-go/where-do-we-go.html   |  67 +----
 30 files changed, 883 insertions(+), 855 deletions(-)
 create mode 100644 subjects/build-brick-and-break/build-brick-and-break.css
 create mode 100644 subjects/fifty-shades-of-cold/fifty-shades-of-cold.css
 create mode 100644 subjects/get-them-all-dom/get-them-all.css
 create mode 100644 subjects/gossip-grid/gossip-grid.css
 create mode 100644 subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.css
 create mode 100644 subjects/keycodes-symphony/keycodes-symphony.css
 create mode 100644 subjects/mouse-trap/mouse-trap.css
 create mode 100644 subjects/pick-and-click/pick-and-click.css
 create mode 100644 subjects/pimp-my-style/pimp-my-style.css
 create mode 100644 subjects/where-do-we-go/where-do-we-go.css

diff --git a/subjects/build-brick-and-break/README.md b/subjects/build-brick-and-break/README.md
index eb28f3f7..6e71d929 100644
--- a/subjects/build-brick-and-break/README.md
+++ b/subjects/build-brick-and-break/README.md
@@ -25,7 +25,8 @@ You only need to create & submit the JS file `build-brick-and-break.js`, We're p
 
 - the HTML file [build-brick-and-break.html](./build-brick-and-break.html) can be opened in the browser, which includes:
   - the JS script running some code, and which will enable you to run your code.
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
+
+- the CSS file [build-brick-and-break.css](./build-brick-and-break.css) feel free to use those as they are, or modify them.
 
 ### Expected result
 
diff --git a/subjects/build-brick-and-break/build-brick-and-break.css b/subjects/build-brick-and-break/build-brick-and-break.css
new file mode 100644
index 00000000..860daf6c
--- /dev/null
+++ b/subjects/build-brick-and-break/build-brick-and-break.css
@@ -0,0 +1,61 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-end;
+  height: 100vh;
+  color: var(--text);
+  padding: 10vh 36.5vw;
+}
+
+div {
+  text-align: center;
+  font-size: 10px;
+  width: 9vw;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 4.44vh;
+  background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%);
+}
+
+#tools {
+  position: fixed;
+  right: 100px;
+  font-size: 80px;
+  cursor: pointer;
+  user-select: none;
+}
+
+[data-repaired='true'] {
+  color: hsl(275, 100%, 50%);
+}
+
+[data-repaired='true']:after {
+  content: '-repaired';
+}
+
+[data-repaired='in progress'] {
+  color: black;
+}
+
+[data-repaired='in progress']:after {
+  content: '-in progress';
+}
diff --git a/subjects/build-brick-and-break/build-brick-and-break.html b/subjects/build-brick-and-break/build-brick-and-break.html
index c8d6bcec..2f45ca52 100644
--- a/subjects/build-brick-and-break/build-brick-and-break.html
+++ b/subjects/build-brick-and-break/build-brick-and-break.html
@@ -1,108 +1,49 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Build brick and break</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style type="text/css">
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-end;
-  height: 100vh;
-  color: var(--text);
-  padding: 10vh 36.5vw;
-}
-
-div {
-  text-align: center;
-  font-size: 10px;
-  width: 9vw;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 4.44vh;
-  background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%);
-}
-
-#tools {
-  position: fixed;
-  right: 100px;
-  font-size: 80px;
-  cursor: pointer;
-  user-select: none;
-}
-
-[data-repaired='true'] {
-  color: hsl(275, 100%, 50%);
-}
-
-[data-repaired='true']:after {
-  content: '-repaired';
-}
-
-[data-repaired='in progress'] {
-  color: black;
-}
-
-[data-repaired='in progress']:after {
-  content: '-in progress';
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./build-brick-and-break.css">
 </head>
+
 <body>
   <script type="module">
-import { build, repair, destroy } from './build-brick-and-break.js'
+    import { build, repair, destroy } from './build-brick-and-break.js'
 
-build(54)
+    build(54)
 
-const body = document.querySelector('body')
+    const body = document.querySelector('body')
 
-const tools = document.createElement('section')
-tools.id = 'tools'
-body.append(tools)
+    const tools = document.createElement('section')
+    tools.id = 'tools'
+    body.append(tools)
 
-const dynamite = document.createElement('span')
-dynamite.id = 'dynamite'
-dynamite.textContent = '🧨'
-dynamite.addEventListener('click', destroy)
+    const dynamite = document.createElement('span')
+    dynamite.id = 'dynamite'
+    dynamite.textContent = '🧨'
+    dynamite.addEventListener('click', destroy)
 
-const hammer = document.createElement('span')
-hammer.id = 'hammer'
-hammer.textContent = '🔨'
-hammer.addEventListener('click', () => repair(...reparations))
+    const hammer = document.createElement('span')
+    hammer.id = 'hammer'
+    hammer.textContent = '🔨'
+    hammer.addEventListener('click', () => repair(...reparations))
 
-tools.append(dynamite, hammer)
+    tools.append(dynamite, hammer)
 
-const random = (min, max) => {
-  min = Math.ceil(min)
-  max = Math.floor(max)
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
+    const random = (min, max) => {
+      min = Math.ceil(min)
+      max = Math.floor(max)
+      return Math.floor(Math.random() * (max - min + 1)) + min
+    }
 
-const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`)
-const reparations = [...new Set(['brick-26', ...randomBricks])]
+    const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`)
+    const reparations = [...new Set(['brick-26', ...randomBricks])]
 
-body.dataset.reparations = reparations
+    body.dataset.reparations = reparations
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/fifty-shades-of-cold/README.md b/subjects/fifty-shades-of-cold/README.md
index e7c31862..f1d4d888 100644
--- a/subjects/fifty-shades-of-cold/README.md
+++ b/subjects/fifty-shades-of-cold/README.md
@@ -29,10 +29,11 @@ You only need to create & submit the JS file `fifty-shades-of-cold.js`, we're pr
 - the HTML file [fifty-shades-of-cold.html](./fifty-shades-of-cold.html) to open in the browser, which includes:
 
   - the JS script running some code, and which will enable you to run yours
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
 
 - the data file [fifty-shades-of-cold.data.js](./fifty-shades-of-cold.data.js) from which you can import `colors`.
 
+- the CSS file [fifty-shades-of-cold.css](./fifty-shades-of-cold.css) feel free to use those as they are, or modify them.
+
 ### Expected result
 
 You can see an example of the expected result [here](https://youtu.be/a-3JDEvW-Qg)
diff --git a/subjects/fifty-shades-of-cold/fifty-shades-of-cold.css b/subjects/fifty-shades-of-cold/fifty-shades-of-cold.css
new file mode 100644
index 00000000..91713a2e
--- /dev/null
+++ b/subjects/fifty-shades-of-cold/fifty-shades-of-cold.css
@@ -0,0 +1,35 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  width: 100vw;
+  padding: 5rem;
+  font-size: 12px;
+}
+
+div {
+  cursor: pointer;
+  width: 150px;
+  height: 150px;
+  margin: 20px;
+  padding: 5px 8px;
+}
diff --git a/subjects/fifty-shades-of-cold/fifty-shades-of-cold.html b/subjects/fifty-shades-of-cold/fifty-shades-of-cold.html
index 8bb0fe56..39cb9839 100644
--- a/subjects/fifty-shades-of-cold/fifty-shades-of-cold.html
+++ b/subjects/fifty-shades-of-cold/fifty-shades-of-cold.html
@@ -1,61 +1,28 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Fifty shades of cold</title>
+  <title>Fifty shades of cold</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  width: 100vw;
-  padding: 5rem;
-  font-size: 12px;
-}
-
-div {
-  cursor: pointer;
-  width: 150px;
-  height: 150px;
-  margin: 20px;
-  padding: 5px 8px;
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./fifty-shades-of-cold.css">
+
 </head>
+
 <body>
   <script type="module">
 
-import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js'
+    import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js'
 
-generateClasses()
-generateColdShades()
+    generateClasses()
+    generateColdShades()
 
-const divs = [...document.querySelectorAll('div')]
-divs.map((d) => {
-  d.addEventListener('click', () => choseShade(d.textContent))
-})
+    const divs = [...document.querySelectorAll('div')]
+    divs.map((d) => {
+      d.addEventListener('click', () => choseShade(d.textContent))
+    })
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/get-them-all-dom/README.md b/subjects/get-them-all-dom/README.md
index fc212ccb..e0fb4111 100644
--- a/subjects/get-them-all-dom/README.md
+++ b/subjects/get-them-all-dom/README.md
@@ -51,3 +51,5 @@ You only need to create & submit the JS file `get-them-all.js` ; we're providing
   - the import of the data
 
 - the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML
+
+- the CSS file [get-them-all.css](./get-them-all.css) used to style the content in the HTML
diff --git a/subjects/get-them-all-dom/get-them-all.css b/subjects/get-them-all-dom/get-them-all.css
new file mode 100644
index 00000000..cd3deafc
--- /dev/null
+++ b/subjects/get-them-all-dom/get-them-all.css
@@ -0,0 +1,87 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  padding: 100px;
+  justify-content: center;
+  align-items: center;
+  font-size: 15px;
+  margin-top: 150px;
+}
+
+button {
+  outline: none;
+  border: none;
+}
+
+#buttons {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  top: 0;
+  height: 150px;
+  background: var(--background);
+  box-shadow: 0 0 50px black;
+}
+
+#buttons * {
+  margin: 0 20px;
+  padding: 10px 20px;
+  background: var(--clear);
+  border-radius: 20px;
+  cursor: pointer;
+  user-select: none;
+  width: 200px;
+  text-align: center;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.3;
+}
+
+a,
+span {
+  min-width: 110px;
+  min-height: 110px;
+  width: 5vw;
+  height: 5vw;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  border: solid 1px var(--clear);
+  line-height: 22px;
+  padding: 10px;
+  color: var(--clear);
+  margin: 30px;
+}
+
+.found {
+  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6),
+    -10px -10px 15px rgba(255, 255, 255, 0.074);
+  border: none;
+  background: var(--purple);
+  color: var(--background);
+}
diff --git a/subjects/get-them-all-dom/get-them-all.html b/subjects/get-them-all-dom/get-them-all.html
index c936a790..ff0bba6f 100644
--- a/subjects/get-them-all-dom/get-them-all.html
+++ b/subjects/get-them-all-dom/get-them-all.html
@@ -1,179 +1,93 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Get them all</title>
+  <title>Get them all</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  padding: 100px;
-  justify-content: center;
-  align-items: center;
-  font-size: 15px;
-  margin-top: 150px;
-}
-
-button {
-  outline: none;
-  border: none;
-}
-
-#buttons {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  top: 0;
-  height: 150px;
-  background: var(--background);
-  box-shadow: 0 0 50px black;
-}
-
-#buttons * {
-  margin: 0 20px;
-  padding: 10px 20px;
-  background: var(--clear);
-  border-radius: 20px;
-  cursor: pointer;
-  user-select: none;
-  width: 200px;
-  text-align: center;
-}
-
-.disabled {
-  pointer-events: none;
-  opacity: 0.3;
-}
-
-a,
-span {
-  min-width: 110px;
-  min-height: 110px;
-  width: 5vw;
-  height: 5vw;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  text-align: center;
-  border: solid 1px var(--clear);
-  line-height: 22px;
-  padding: 10px;
-  color: var(--clear);
-  margin: 30px;
-}
-
-.found {
-  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6),
-    -10px -10px 15px rgba(255, 255, 255, 0.074);
-  border: none;
-  background: var(--purple);
-  color: var(--background);
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./get-them-all.css">
 </head>
+
 <body>
   <script type="module">
 
-import { people } from './get-them-all.data.js'
-import {
-  getBonannoPisano,
-  getActive,
-  getArchitects,
-  getClassical,
-} from './get-them-all.js'
-
-const body = document.querySelector('body')
-
-const shuffle = (array) => {
-  const test = array.length - 1
-  for (let i = test; i > 0; i--) {
-    const j = Math.floor(Math.random() * i)
-    const temp = array[i]
-    array[i] = array[j]
-    array[j] = temp
-  }
-  return array
-}
-
-shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
-  const people = document.createElement(tag)
-  people.id = id
-  people.textContent = 'Someone'
-  people.className = `${classe} ${active ? 'active' : ''}`
-  body.append(people)
-})
-
-const buttonsContainer = document.createElement('div')
-buttonsContainer.id = 'buttons'
-body.append(buttonsContainer)
-
-const buttons = [
-  { name: 'Architect', action: getArchitects },
-  { name: 'Classical', action: getClassical },
-  { name: 'Active', action: getActive },
-  { name: 'Bonanno', action: getBonannoPisano },
-]
-
-buttons.forEach(({ name, action }, i) => {
-  const btn = document.createElement('button')
-  btn.id = `btn${name}`
-  btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
-
-  if (i > 0) {
-    btn.className = 'disabled'
-  }
-
-  btn.addEventListener('click', () => {
-    const [targetted, others] = action()
-
-    if (name === 'Bonanno') {
-      targetted.textContent = targetted.id.replace('P', ' P')
-      targetted.classList.add('found')
-    } else {
-      targetted.forEach((t) => {
-        t.textContent = name
-      })
+    import { people } from './get-them-all.data.js'
+    import {
+      getBonannoPisano,
+      getActive,
+      getArchitects,
+      getClassical,
+    } from './get-them-all.js'
+
+    const body = document.querySelector('body')
+
+    const shuffle = (array) => {
+      const test = array.length - 1
+      for (let i = test; i > 0; i--) {
+        const j = Math.floor(Math.random() * i)
+        const temp = array[i]
+        array[i] = array[j]
+        array[j] = temp
+      }
+      return array
     }
 
-    others.forEach((o) => {
-      o.style.opacity = 0.2
+    shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
+      const people = document.createElement(tag)
+      people.id = id
+      people.textContent = 'Someone'
+      people.className = `${classe} ${active ? 'active' : ''}`
+      body.append(people)
     })
 
-    btn.className = 'disabled'
-
-    const last = i + 1 === buttons.length
-    if (last) return
-    const next = document.getElementById(`btn${buttons[i + 1].name}`)
-    next.classList.remove('disabled')
-  })
+    const buttonsContainer = document.createElement('div')
+    buttonsContainer.id = 'buttons'
+    body.append(buttonsContainer)
+
+    const buttons = [
+      { name: 'Architect', action: getArchitects },
+      { name: 'Classical', action: getClassical },
+      { name: 'Active', action: getActive },
+      { name: 'Bonanno', action: getBonannoPisano },
+    ]
+
+    buttons.forEach(({ name, action }, i) => {
+      const btn = document.createElement('button')
+      btn.id = `btn${name}`
+      btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
+
+      if (i > 0) {
+        btn.className = 'disabled'
+      }
+
+      btn.addEventListener('click', () => {
+        const [targetted, others] = action()
+
+        if (name === 'Bonanno') {
+          targetted.textContent = targetted.id.replace('P', ' P')
+          targetted.classList.add('found')
+        } else {
+          targetted.forEach((t) => {
+            t.textContent = name
+          })
+        }
+
+        others.forEach((o) => {
+          o.style.opacity = 0.2
+        })
+
+        btn.className = 'disabled'
+
+        const last = i + 1 === buttons.length
+        if (last) return
+        const next = document.getElementById(`btn${buttons[i + 1].name}`)
+        next.classList.remove('disabled')
+      })
 
-  buttonsContainer.append(btn)
-})
+      buttonsContainer.append(btn)
+    })
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/gossip-grid/README.md b/subjects/gossip-grid/README.md
index 74545184..ffc1fcf7 100644
--- a/subjects/gossip-grid/README.md
+++ b/subjects/gossip-grid/README.md
@@ -22,10 +22,11 @@ You only need to create & submit the JS file `gossip-grid.js`; we're providing y
 - the HTML file [gossip-grid.html](./gossip-grid.html) to open in the browser, which includes:
 
   - the JS script which will enable you to run your code.
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
 
 - the data file [gossip-grid.data.js](./gossip-grid.data.js) from which you can import `gossips`.
 
+- the CSS file [gossip-grid.css](./gossip-grid.css) feel free to use those as they are, or modify them.
+
 ### Expected result
 
 You can see an example of the expected result [here](https://youtu.be/nbR2eHBqTxU)
diff --git a/subjects/gossip-grid/gossip-grid.css b/subjects/gossip-grid/gossip-grid.css
new file mode 100644
index 00000000..d47ee7d0
--- /dev/null
+++ b/subjects/gossip-grid/gossip-grid.css
@@ -0,0 +1,115 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  padding: 10rem;
+  align-items: flex-start;
+}
+
+.gossip {
+  background: hsl(280, 50%, 50%);
+  margin: 20px;
+  width: 250px;
+  padding: 20px 25px;
+  line-height: 30px;
+  font-size: 20px;
+  word-break: break-word;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.gossip:first-letter {
+  text-transform: uppercase;
+}
+
+.ranges {
+  position: fixed;
+  top: 5rem;
+  display: flex;
+}
+
+.range {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--clear);
+  font-family: monospace;
+}
+
+.range label,
+.range span {
+  width: 100px;
+}
+
+.range label {
+  text-align: right;
+}
+
+input {
+  margin: 20px 25px;
+}
+
+textarea {
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  outline: none;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  resize: none;
+}
+
+textarea::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+button {
+  margin-top: 20px;
+  text-align: right;
+  border: solid 1px white;
+  align-self: flex-end;
+  padding: 5px 15px;
+  cursor: pointer;
+}
+
+.fade-in {
+  animation: fade-in 0.75s;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0%;
+  }
+  to {
+    opacity: 100%;
+  }
+}
diff --git a/subjects/gossip-grid/gossip-grid.html b/subjects/gossip-grid/gossip-grid.html
index b593c46b..b4101355 100644
--- a/subjects/gossip-grid/gossip-grid.html
+++ b/subjects/gossip-grid/gossip-grid.html
@@ -1,135 +1,21 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Gossip grid</title>
+  <title>Gossip grid</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  padding: 10rem;
-  align-items: flex-start;
-}
-
-.gossip {
-  background: hsl(280, 50%, 50%);
-  margin: 20px;
-  width: 250px;
-  padding: 20px 25px;
-  line-height: 30px;
-  font-size: 20px;
-  word-break: break-word;
-  color: white;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
-.gossip:first-letter {
-  text-transform: uppercase;
-}
-
-.ranges {
-  position: fixed;
-  top: 5rem;
-  display: flex;
-}
-
-.range {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--clear);
-  font-family: monospace;
-}
-
-.range label,
-.range span {
-  width: 100px;
-}
-
-.range label {
-  text-align: right;
-}
-
-input {
-  margin: 20px 25px;
-}
-
-textarea {
-  height: 100%;
-  width: 100%;
-  max-width: 100%;
-  outline: none;
-  border: none;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  resize: none;
-}
-
-textarea::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-button {
-  margin-top: 20px;
-  text-align: right;
-  border: solid 1px white;
-  align-self: flex-end;
-  padding: 5px 15px;
-  cursor: pointer;
-}
-
-.fade-in {
-  animation: fade-in 0.75s;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0%;
-  }
-  to {
-    opacity: 100%;
-  }
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./gossip-grid.css">
 </head>
+
 <body>
   <script type="module">
 
-import { grid } from './gossip-grid.js'
+    import { grid } from './gossip-grid.js'
 
-grid()
+    grid()
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/harder-bigger-bolder-stronger/README.md b/subjects/harder-bigger-bolder-stronger/README.md
index feb4c1c6..9d2af7e9 100644
--- a/subjects/harder-bigger-bolder-stronger/README.md
+++ b/subjects/harder-bigger-bolder-stronger/README.md
@@ -17,7 +17,8 @@ You only need to create & submit the JS file `harder-bigger-bolder-stronger.js`.
 - the HTML file [harder-bigger-bolder-stronger.html](./harder-bigger-bolder-stronger.html) to open in the browser, which includes:
 
   - the JS script running some code, and which will enable you to run yours.
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
+
+- the CSS file [harder-bigger-bolder-stronger.css](./harder-bigger-bolder-stronger.css) feel free to use those as they are, or modify them.
 
 ### Notions
 
diff --git a/subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.css b/subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.css
new file mode 100644
index 00000000..9ca11026
--- /dev/null
+++ b/subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.css
@@ -0,0 +1,37 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  width: 100vw;
+  padding: 5rem;
+  font-size: 12px;
+}
+
+div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 5px;
+  width: 200px;
+  height: 200px;
+  color: white;
+}
diff --git a/subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.html b/subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.html
index f771c1eb..17166c38 100644
--- a/subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.html
+++ b/subjects/harder-bigger-bolder-stronger/harder-bigger-bolder-stronger.html
@@ -1,57 +1,21 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Harder, bigger, bolder, stronger</title>
+  <title>Harder, bigger, bolder, stronger</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  width: 100vw;
-  padding: 5rem;
-  font-size: 12px;
-}
-
-div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 5px;
-  width: 200px;
-  height: 200px;
-  color: white;
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./build-brick-and-break.css">
 </head>
+
 <body>
   <script type="module">
 
-import { generateLetters } from './harder-bigger-bolder-stronger.js'
+    import { generateLetters } from './harder-bigger-bolder-stronger.js'
 
-generateLetters()
+    generateLetters()
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/keycodes-symphony/README.md b/subjects/keycodes-symphony/README.md
index 73d7194d..807bd007 100644
--- a/subjects/keycodes-symphony/README.md
+++ b/subjects/keycodes-symphony/README.md
@@ -17,7 +17,8 @@ You only need to create & submit the JS file `keycodes-symphony.js`; we're provi
 - the HTML file [keycodes-symphony.html](./keycodes-symphony.html) to open in the browser, which includes:
 
   - the JS script which will allow to run your code.
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
+
+- the CSS file [keycodes-symphony.css](./keycodes-symphony.css) feel free to use those as they are, or modify them.
 
 ### Expected result
 
diff --git a/subjects/keycodes-symphony/keycodes-symphony.css b/subjects/keycodes-symphony/keycodes-symphony.css
new file mode 100644
index 00000000..abea8587
--- /dev/null
+++ b/subjects/keycodes-symphony/keycodes-symphony.css
@@ -0,0 +1,37 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  width: 100vw;
+  height: 100vh;
+}
+
+.note {
+  width: 100%;
+  flex: 1 1 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 15px;
+  font-size: 40px;
+  color: white;
+  transition: all 0.2s ease-in-out;
+}
\ No newline at end of file
diff --git a/subjects/keycodes-symphony/keycodes-symphony.html b/subjects/keycodes-symphony/keycodes-symphony.html
index ffc423f7..ed4c46a3 100644
--- a/subjects/keycodes-symphony/keycodes-symphony.html
+++ b/subjects/keycodes-symphony/keycodes-symphony.html
@@ -1,57 +1,22 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Keycodes symphony</title>
+  <title>Keycodes symphony</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  width: 100vw;
-  height: 100vh;
-}
+  <link rel="stylesheet" type="text/css" href="./keycodes-symphony.css">
 
-.note {
-  width: 100%;
-  flex: 1 1 80px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: 15px;
-  font-size: 40px;
-  color: white;
-  transition: all 0.2s ease-in-out;
-}
-
-  </style>
 </head>
+
 <body>
   <script type="module">
 
-import { compose } from './keycodes-symphony.js'
+    import { compose } from './keycodes-symphony.js'
 
-compose()
+    compose()
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/mouse-trap/README.md b/subjects/mouse-trap/README.md
index e4d6731a..db9bc9cb 100644
--- a/subjects/mouse-trap/README.md
+++ b/subjects/mouse-trap/README.md
@@ -22,7 +22,8 @@ You only need to create & submit the JS file `mouse-trap.js`; we're providing yo
 - the HTML file [mouse-trap.html](./mouse-trap.html) to open in the browser, which includes:
 
   - the JS script which will enable you to run your code.
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
+
+- the CSS file [mouse-trap.css](./mouse-trap.css) feel free to use those as they are, or modify them.
 
 ### Expected result
 
diff --git a/subjects/mouse-trap/mouse-trap.css b/subjects/mouse-trap/mouse-trap.css
new file mode 100644
index 00000000..73bab445
--- /dev/null
+++ b/subjects/mouse-trap/mouse-trap.css
@@ -0,0 +1,42 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  width: 100vw;
+  height: 100vh;
+  padding: 5rem;
+  font-size: 12px;
+}
+
+.circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  position: absolute;
+  opacity: 0.75;
+}
+
+.box {
+  width: 25vw;
+  height: 25vh;
+  border: solid 1px var(--clear);
+}
\ No newline at end of file
diff --git a/subjects/mouse-trap/mouse-trap.html b/subjects/mouse-trap/mouse-trap.html
index 856e78fa..238e6065 100644
--- a/subjects/mouse-trap/mouse-trap.html
+++ b/subjects/mouse-trap/mouse-trap.html
@@ -1,63 +1,23 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Mouse trap</title>
+  <title>Mouse trap</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  width: 100vw;
-  height: 100vh;
-  padding: 5rem;
-  font-size: 12px;
-}
-
-.circle {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  position: absolute;
-  opacity: 0.75;
-}
-
-.box {
-  width: 25vw;
-  height: 25vh;
-  border: solid 1px var(--clear);
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./mouse-trap.css">
 </head>
+
 <body>
   <script type="module">
 
-import { setBox, createCircle, moveCircle } from './mouse-trap.js'
+    import { setBox, createCircle, moveCircle } from './mouse-trap.js'
 
-setBox()
-createCircle()
-moveCircle()
+    setBox()
+    createCircle()
+    moveCircle()
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/pick-and-click/README.md b/subjects/pick-and-click/README.md
index 454b876e..167c0274 100644
--- a/subjects/pick-and-click/README.md
+++ b/subjects/pick-and-click/README.md
@@ -32,7 +32,9 @@ You only need to create & submit the JS file `pick-and-click.js`; we're providin
 - the HTML file [pick-and-click.html](./pick-and-click.html) to open in the browser, which includes:
 
   - the JS script which will enable you to run your code.
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
+
+- the CSS file [pick-and-click.css](./pick-and-click.css) feel free to use those as they are, or modify them.
+
 
 ### Expected result
 
diff --git a/subjects/pick-and-click/pick-and-click.css b/subjects/pick-and-click/pick-and-click.css
new file mode 100644
index 00000000..fc484f24
--- /dev/null
+++ b/subjects/pick-and-click/pick-and-click.css
@@ -0,0 +1,66 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  width: 100vw;
+  height: 100vh;
+  padding: 5rem;
+  cursor: crosshair;
+}
+
+svg {
+  filter: invert(100%);
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+}
+
+svg line {
+  stroke-width: 0.6px;
+  stroke: grey;
+}
+
+.text {
+  position: fixed;
+  filter: invert(100%);
+  font-size: 50px;
+  cursor: pointer;
+  white-space: pre-wrap;
+}
+
+.hsl {
+  filter: invert(100%);
+  font-size: 17px;
+}
+
+.hue {
+  top: 100px;
+  right: 100px;
+  text-align: right;
+}
+
+.luminosity {
+  bottom: 100px;
+  left: 100px;
+}
diff --git a/subjects/pick-and-click/pick-and-click.html b/subjects/pick-and-click/pick-and-click.html
index e7d9220e..cc600142 100644
--- a/subjects/pick-and-click/pick-and-click.html
+++ b/subjects/pick-and-click/pick-and-click.html
@@ -1,86 +1,21 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Pick & click</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  width: 100vw;
-  height: 100vh;
-  padding: 5rem;
-  cursor: crosshair;
-}
-
-svg {
-  filter: invert(100%);
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-}
-
-svg line {
-  stroke-width: 0.6px;
-  stroke: grey;
-}
-
-.text {
-  position: fixed;
-  filter: invert(100%);
-  font-size: 50px;
-  cursor: pointer;
-  white-space: pre-wrap;
-}
-
-.hsl {
-  filter: invert(100%);
-  font-size: 17px;
-}
-
-.hue {
-  top: 100px;
-  right: 100px;
-  text-align: right;
-}
-
-.luminosity {
-  bottom: 100px;
-  left: 100px;
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./pick-and-click.css">
 </head>
+
 <body>
   <script type="module">
 
-import { pick } from './pick-and-click.js'
+    import { pick } from './pick-and-click.js'
 
-pick()
+    pick()
 
   </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/subjects/pimp-my-style/README.md b/subjects/pimp-my-style/README.md
index 60a3da90..a435644b 100644
--- a/subjects/pimp-my-style/README.md
+++ b/subjects/pimp-my-style/README.md
@@ -46,9 +46,10 @@ You only need to create & submit the JS file `pimp-my-style.js`. Ee're providing
 - the HTML file [pimp-my-style.html](./pimp-my-style.html) to open in the browser, which includes:
 
   - the JS script running some code, and which will enable you to run yours.
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them.
 - the data file [pimp-my-style.data.js](./pimp-my-style.data.js) from which you can import `styles`.
 
+- the CSS file [pimp-my-style.css](./pimp-my-style.css) feel free to use those as they are, or modify them.
+
 ### Expected result
 
 You can see an example of the expected result [here](https://youtu.be/VIRf3TBDTN4)
diff --git a/subjects/pimp-my-style/pimp-my-style.css b/subjects/pimp-my-style/pimp-my-style.css
new file mode 100644
index 00000000..9870fde8
--- /dev/null
+++ b/subjects/pimp-my-style/pimp-my-style.css
@@ -0,0 +1,154 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  width: 100vw;
+  height: 100vh;
+  color: var(--text);
+  padding: 2.5rem 0;
+}
+
+button {
+  user-select: none;
+  letter-spacing: 0;
+  color: white;
+  outline: none;
+  border: none;
+}
+
+.button:first-letter {
+  text-transform: uppercase;
+}
+
+.button.unpimp:before {
+  content: 'Un';
+}
+
+.button {
+  background: var(--background);
+  font-family: serif;
+  width: 70%;
+  text-align: center;
+}
+
+.one {
+  font-size: 75px;
+}
+
+.two {
+  font-family: sans-serif;
+}
+
+.three {
+  letter-spacing: 15px;
+}
+
+.four {
+  padding: 20px 40px;
+  border: solid 1px var(--clear);
+}
+
+.five {
+  border-radius: 100px;
+}
+
+.six {
+  border: none;
+  box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075),
+    -10px -10px 15px rgba(0, 0, 0, 0.3);
+}
+
+.seven {
+  color: var(--purple);
+}
+
+.eight {
+  border: solid 0.5px var(--purple);
+}
+
+.nine {
+  background: var(--purple);
+  color: white;
+  position: relative;
+  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8);
+}
+
+.ten:after {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  top: -16px;
+  left: -16px;
+  border-radius: 100px;
+  border: solid 1px var(--clear);
+}
+
+.eleven:after {
+  position: absolute;
+  content: '';
+  padding: 30px;
+  top: -31px;
+  left: -31px;
+  background: white;
+  z-index: -1;
+}
+
+.twelve {
+  color: var(--background);
+}
+
+.thirteen {
+  text-decoration: underline;
+}
+
+.fourteen {
+  animation: animation 1.5s linear infinite;
+  background: linear-gradient(
+    to right,
+    var(--purple) 0%,
+    white 48%,
+    white 52%,
+    var(--purple) 100%
+  );
+  background-size: 500px 640px;
+  position: relative;
+}
+
+@keyframes animation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 500px 0;
+  }
+}
+
+.fifteen {
+  height: 100vh;
+  width: 100vw;
+  border-radius: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/subjects/pimp-my-style/pimp-my-style.html b/subjects/pimp-my-style/pimp-my-style.html
index 7c12d1ae..84be79de 100644
--- a/subjects/pimp-my-style/pimp-my-style.html
+++ b/subjects/pimp-my-style/pimp-my-style.html
@@ -1,181 +1,28 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Pimp my style</title>
+  <title>Pimp my style</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  width: 100vw;
-  height: 100vh;
-  color: var(--text);
-  padding: 2.5rem 0;
-}
-
-button {
-  user-select: none;
-  letter-spacing: 0;
-  color: white;
-  outline: none;
-  border: none;
-}
-
-.button:first-letter {
-  text-transform: uppercase;
-}
-
-.button.unpimp:before {
-  content: 'Un';
-}
-
-.button {
-  background: var(--background);
-  font-family: serif;
-  width: 70%;
-  text-align: center;
-}
-
-.one {
-  font-size: 75px;
-}
-
-.two {
-  font-family: sans-serif;
-}
-
-.three {
-  letter-spacing: 15px;
-}
-
-.four {
-  padding: 20px 40px;
-  border: solid 1px var(--clear);
-}
-
-.five {
-  border-radius: 100px;
-}
-
-.six {
-  border: none;
-  box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075),
-    -10px -10px 15px rgba(0, 0, 0, 0.3);
-}
-
-.seven {
-  color: var(--purple);
-}
-
-.eight {
-  border: solid 0.5px var(--purple);
-}
-
-.nine {
-  background: var(--purple);
-  color: white;
-  position: relative;
-  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8);
-}
-
-.ten:after {
-  position: absolute;
-  content: '';
-  width: 100%;
-  height: 100%;
-  padding: 15px;
-  top: -16px;
-  left: -16px;
-  border-radius: 100px;
-  border: solid 1px var(--clear);
-}
-
-.eleven:after {
-  position: absolute;
-  content: '';
-  padding: 30px;
-  top: -31px;
-  left: -31px;
-  background: white;
-  z-index: -1;
-}
-
-.twelve {
-  color: var(--background);
-}
-
-.thirteen {
-  text-decoration: underline;
-}
-
-.fourteen {
-  animation: animation 1.5s linear infinite;
-  background: linear-gradient(
-    to right,
-    var(--purple) 0%,
-    white 48%,
-    white 52%,
-    var(--purple) 100%
-  );
-  background-size: 500px 640px;
-  position: relative;
-}
-
-@keyframes animation {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 500px 0;
-  }
-}
-
-.fifteen {
-  height: 100vh;
-  width: 100vw;
-  border-radius: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-  </style>
+  <link rel="stylesheet" type="text/css" href="./pimp-my-style.css">
 </head>
+
 <body>
   <script type="module">
 
-import { pimp } from './pimp-my-style.js'
+    import { pimp } from './pimp-my-style.js'
 
-const body = document.querySelector('body')
+    const body = document.querySelector('body')
 
-const button = document.createElement('button')
-button.className = 'button'
-button.textContent = 'pimp my style'
-body.append(button)
+    const button = document.createElement('button')
+    button.className = 'button'
+    button.textContent = 'pimp my style'
+    body.append(button)
 
-button.addEventListener('click', pimp)
+    button.addEventListener('click', pimp)
 
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/subjects/where-do-we-go/README.md b/subjects/where-do-we-go/README.md
index 72086be2..693d82bc 100644
--- a/subjects/where-do-we-go/README.md
+++ b/subjects/where-do-we-go/README.md
@@ -28,11 +28,12 @@ You only need to create & submit the JS file `where-do-we-go.js`; we're providin
 - the HTML file [where-do-we-go.html](./where-do-we-go.html) to open in the browser, which includes:
 
   - the JS script which will enable you to run your code
-  - some CSS pre-styled classes: feel free to use those as they are, or modify them
 
 - the data file [where-do-we-go.data.js](./where-do-we-go.data.js) from which you can import `places`
 
-- the images to use, in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip)
+- the CSS file [where-do-we-go.css](./where-do-we-go.css) feel free to use those as they are, or modify them.
+
+- the images to use, in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip) or you can can fetch from the public URL, example `https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg` [arlit](https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg)
 
 ### Expected result
 
diff --git a/subjects/where-do-we-go/where-do-we-go.css b/subjects/where-do-we-go/where-do-we-go.css
new file mode 100644
index 00000000..aed8d0b3
--- /dev/null
+++ b/subjects/where-do-we-go/where-do-we-go.css
@@ -0,0 +1,56 @@
+
+:root {
+  --background: hsl(0, 0%, 12%);
+  --text: hsl(0, 0%, 80%);
+  --clear: hsl(0, 0%, 65%);
+  --disabled: hsl(0, 0%, 35%);
+  --purple: #bb73e6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  letter-spacing: 1.5px;
+  background: var(--background);
+}
+
+section {
+  height: 100vh;
+  width: 100vw;
+}
+
+a {
+  text-decoration: none;
+}
+
+.location {
+  position: fixed;
+  top: 0;
+  color: white;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 100px;
+  line-height: 130px;
+  white-space: pre-wrap;
+  text-align: center;
+  cursor: pointer;
+}
+
+.direction {
+  position: fixed;
+  right: 100px;
+  top: 100px;
+  text-align: center;
+  font-size: 40px;
+  line-height: 60px;
+  color: white;
+  white-space: pre-wrap;
+}
\ No newline at end of file
diff --git a/subjects/where-do-we-go/where-do-we-go.html b/subjects/where-do-we-go/where-do-we-go.html
index b1fd8795..57434daf 100644
--- a/subjects/where-do-we-go/where-do-we-go.html
+++ b/subjects/where-do-we-go/where-do-we-go.html
@@ -1,72 +1,19 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-	<title>Where do we go?</title>
+  <title>Where do we go?</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <style>
-:root {
-  --background: hsl(0, 0%, 12%);
-  --text: hsl(0, 0%, 80%);
-  --clear: hsl(0, 0%, 65%);
-  --disabled: hsl(0, 0%, 35%);
-  --purple: #bb73e6;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  letter-spacing: 1.5px;
-  background: var(--background);
-}
-
-section {
-  height: 100vh;
-  width: 100vw;
-}
-
-a {
-  text-decoration: none;
-}
-
-.location {
-  position: fixed;
-  top: 0;
-  color: white;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 100px;
-  line-height: 130px;
-  white-space: pre-wrap;
-  text-align: center;
-  cursor: pointer;
-}
-
-.direction {
-  position: fixed;
-  right: 100px;
-  top: 100px;
-  text-align: center;
-  font-size: 40px;
-  line-height: 60px;
-  color: white;
-  white-space: pre-wrap;
-}
-  </style>
+  <link rel="stylesheet" type="text/css" href="./where-do-we-go.css">
 </head>
+
 <body>
   <script type="module">
-import { explore } from './where-do-we-go.js'
+    import { explore } from './where-do-we-go.js'
 
-explore()
+    explore()
   </script>
 </body>
+
 </html>
\ No newline at end of file